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 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php基础教程
2015/08/26 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
银行实习生自我鉴定范文
2013/09/19 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
《狼》教学反思
2014/03/02 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
浅谈Java父子类加载顺序
2021/08/04 Java/Android
正则表达式拆分url实例代码
2022/02/24 Java/Android