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 面向对象之命名空间
May 04 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
解析Vue.js中的组件
Feb 02 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
详解JavaScript之ES5的继承
Jul 08 Javascript
js基于canvas实现时钟组件
Feb 07 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强制下载类型的实现代码
2011/04/21 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Django实现发送邮件功能
2019/07/18 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书