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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 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中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript 常用函数
2009/12/30 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
javascript中this关键字详解
2016/12/12 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
vue中appear的用法
2017/08/17 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
keras多显卡训练方式
2020/06/10 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
政风行风建设责任书
2014/07/23 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
素质教育培训心得体会
2016/01/19 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
使用pytorch实现线性回归
2021/04/11 Python
日元符号 ¥
2022/02/17 杂记
实现GO语言对数组切片去重
2022/04/20 Golang
JS setTimeout与setInterval的区别
2022/04/20 Javascript