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 相关文章推荐
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
node.js文件上传处理示例
Oct 27 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jQuery参数列表集合
2011/04/06 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Vue的轮播图组件实现方法
2018/03/03 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
企业文化口号
2014/06/12 职场文书
大专生求职信
2014/06/29 职场文书
教师考核评语大全
2014/12/31 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript