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 随机展示头像实现代码
Dec 06 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python常用知识梳理(必看篇)
2017/03/23 Python
django_orm查询性能优化方法
2018/08/20 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
台湾家适得:Homeget
2019/02/11 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
十八届三中全会感言
2014/03/10 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
天堂的孩子观后感
2015/06/11 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
如何拟写通知正文?
2019/04/02 职场文书
table不让td文字溢出操作方法
2022/12/24 HTML / CSS