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函数
Nov 20 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
Angular 2.x学习教程之结构指令详解
May 25 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
杏林同学录(一)
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
PHP开发负载均衡指南
2010/07/17 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
24岁生日感言
2014/01/13 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
单位绩效考核方案
2014/05/11 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
幼儿园开学通知
2015/04/24 职场文书
行政诉讼答辩状
2015/05/21 职场文书
首都博物馆观后感
2015/06/05 职场文书
人民的好儿女观后感
2015/06/18 职场文书