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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
JavaScript中的类继承
Nov 25 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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类的使用 实例代码讲解
2009/12/28 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python zip()函数使用方法解析
2019/10/31 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
供应链金融服务方案
2014/05/25 职场文书
法定代表人证明书
2014/11/28 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android