js基础之DOM中document对象的常用属性方法详解


Posted in Javascript onOctober 28, 2016

-----引入

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

属性

1  document.anchors  返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等

2  document.URL       返回当前文档的url

3  document.title       返回当前文档的标题

4  document.body    返回body元素节点

方法

1  document.close()     关闭用 document.open() 方法打开的输出流,并显示选定的数据。

<!DOCTYPE html>
<html>
<head>
<script>
function createDoc()
{
var w=window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
}
</script>
</head>

<body>
<input type="button" value="New document in a new window" onclick="createDoc()">
</body>
</html>

2  document.createElement()     创建元素节点。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
  
<script>
  var a = document.createElement('hr');
  document.body.appendChild(a)


</script>
</body>
</html>

3  document.createAttribute()   创建属性节点。

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to make a BUTTON element.</p>

<button onclick="myFunction()">Try it</button>

<script>

function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
};

</script>

</body>
</html>

4  document.createTextNode()  创建文本节点。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>

<script>
  var a = document.createTextNode('hahahah');
  document.body.appendChild(a)


</script>
</body>
</html>

5  document. getElementsByClassName()   返回文档中所有指定类名的元素集合,作为 NodeList 对象集合。所谓NodeList对象集合,是一个类似于数组的数据格式,仅仅提供了length属性,像数组中的push  pop方法等都未提供。

6  document.getElementById() 返回对拥有指定 id 的第一个对象的引用。

7  document.getElementsByName() 返回带有指定名称的对象集合。

8  document.getElementsByTagName() 返回带有指定标签名的对象集合。

9  document.write() 向文档写 HTML 表达式 或 JavaScript 代码。注意:当html文档加载完后再使用write方法,会导致write内容覆盖掉原本的html文档。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>

<script>
  document.write('hahahh')


</script>
</body>
</html>

以上就是小编为大家带来的js基础之DOM中document对象的常用属性方法详解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
childNodes.length与children.length的区别
May 14 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
Javascript+CSS3实现进度条效果
Oct 28 #Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 #Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 #Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 #Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 #Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 #Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python生成随机数组的方法小结
2017/04/15 Python
python删除某个字符
2018/03/19 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
大四本科生的自我评价
2013/12/30 职场文书
婚礼主持词
2014/03/13 职场文书
责任书格式范文
2014/07/28 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
地道战观后感300字
2015/06/04 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Python开发五子棋小游戏
2022/05/02 Python