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中 For, While与递归的用法
May 07 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
JavaScript实现网页计算器功能
Oct 29 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
一个程序下载的管理程序(一)
2006/10/09 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
angular6的响应式表单的实现
2018/10/10 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
详解python里的命名规范
2018/07/16 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
keras输出预测值和真实值方式
2020/06/27 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
大学毕业生个人自荐书
2014/07/02 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
司考复习计划
2015/01/19 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
600字作文之感受大自然
2019/11/27 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技
redis lua限流算法实现示例
2022/07/15 Redis