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 相关文章推荐
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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新手上路(三)
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
对python实现合并两个排序链表的方法详解
2019/01/23 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
通过实例解析python and和or使用方法
2020/11/14 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
广告词串烧
2014/03/19 职场文书
地震捐款倡议书
2014/08/29 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
python实现简单反弹球游戏
2021/04/12 Python
图解上海144收音机
2021/04/22 无线电
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python