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无缝滚动代码
Jan 03 Javascript
Prototype使用指南之dom.js
Jan 10 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Express本地测试HTTPS的示例代码
Jun 06 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
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
JS解析XML的实现代码
2009/11/12 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JS实现简单日历特效
2020/01/03 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
python实现将汉字保存成文本的方法
2018/11/16 Python
用Python逐行分析文件方法
2019/01/28 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python生成特定分布数的实例
2019/12/05 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
一套C++笔试题面试题
2012/06/06 面试题
师德师风演讲稿
2014/05/05 职场文书
企业安全标语
2014/06/07 职场文书
体育教师个人总结
2015/02/09 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Django框架中表单的用法
2022/06/10 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS