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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript数组方法总结分析
May 06 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
微信小程序日期选择器实例代码
Jul 18 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
10个php函数实用却不常见
2015/10/13 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript如何写热点图
2015/12/08 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
vue this.reload 方法 配置
2018/09/12 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python编程实现归并排序
2017/04/14 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python实现汽车管理系统
2018/11/30 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
研发工程师岗位职责
2014/04/28 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
电子商务专业自荐信
2014/06/02 职场文书
离婚协议书范本样本
2014/08/19 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript