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中sort()的用法实例分析
Jan 30 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
如何在 Vue 中使用 JSX
Feb 14 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
2021年最新CPU天梯图
2021/03/04 数码科技
PHP的explode和implode的使用说明
2011/07/17 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python批量提取word内信息
2015/08/09 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
pandas DataFrame运算的实现
2020/06/14 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
师恩难忘教学反思
2014/04/27 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
小学英语复习计划
2015/01/19 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL