标签：nodetype 介绍 baidu classname 允许 type lin 基础上 基于
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准。W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。本文中只介绍基于HTML的 DOM。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
document // 整个文档是一个文档节点 element //每个 HTML 元素是元素节点 text //HTML 元素内的文本是文本节点 attribute //每个 HTML 属性是属性节点 comment //注释是注释节点
attributes //节点（元素）的属性节点 nodeType //节点类型 nodeValue //节点值 nodeName //节点名称 innerHTML //节点所包含的所有元素 innerText //节点所包含的所有文本元素
parentNode //节点（元素）的父节点 (推荐) firstChild //节点下第一个子元素 lastChild //节点下最后一个子元素 childNodes //节点（元素）的子节点
parentElement //父节点标签元素 children //所有子标签 firstElementChild //第一个子标签元素 lastElementChild //最后一个子标签元素 nextElementtSibling //下一个兄弟标签元素 previousElementSibling //上一个兄弟标签元素
getElementById() //通过id属性访问，不支持局部查找 getElementsByTagName() //通过标签名字访问 getElementsByClassName() //通过class名字访问 getElementsByName() //通过属性名字访问，不支持局部查找
下面是用于测试的HTML的body内容
<div class="divTag1"> 大家好才是真的好！ <p name="pTag1" class="pTag2">P标签</p> <div class="divTag2" id="id_Div"> 从你的世界路过 <div>今天世界很美好</div> <a href="www.baidu.com">百度</a> </div> <span>成熟是一种明亮而不刺眼的光辉</span> </div> <span>span标签2</span> <div>div标签</div>
下面是用于测试的JavaScript内容
getElementsByClassName的使用
//getElementsByClassName返回的是一个集合，所以必须取第一个元素 var ele = document.getElementsByClassName("divTag1")[0]; console.log(ele); //显示内部的所有元素 console.log(ele.innerHTML); //显示内部的所有元素 console.log(ele.innerText); //显示内部的所有文本元素
getElementsByTagName的使用
var ele = document.getElementsByTagName("p"); console.log(ele); //获取所有P标签的集合 console.log(ele[0]); //获取所有P标签集合中的第一个元素
getElementsByid的使用
//ID是唯一的，所以通过id获取的标签只有一个 var ele = document.getElementById("id_Div"); console.log(ele) //获取id为id_Div标签 console.log(ele.innerHTML); //显示标签的元素
getElementsByName的使用
var ele = document.getElementsByName("pTag1"); console.log(ele) //显示结点列表NodeList(1) console.log(ele[0].innerHTML) //显示的值为：P标签
导航属性
var ele = document.getElementsByClassName("divTag1")[0]; console.log(ele) //显示集合第一个元素的所有内容 console.log(ele.children) //显示子元素的所有内容 console.log(ele.children[0]) //子元素的第一个元素 console.log(ele.children[0].children) //集合为空
局部查找
在属性导航中，所谓局部查找的意思是在访问HTML属性的基础上进一步访问HTML属性。但需要特别注意的是getElementById()和getElementsByName()不支持局部查找的。
var ele1 = document.getElementsByClassName("divTag1")[0]; //在ele1的基础上继续查找 var ele2 = ele1.getElementsByTagName("span"); console.log(ele2);
标签：nodetype 介绍 baidu classname 允许 type lin 基础上 基于
原文地址：https://www.cnblogs.com/Lynnblog/p/9158012.html
