DOM对象
一、DOM对象
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准。W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。本文中只介绍基于HTML的 DOM。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
二、DOM结点
各个结点对象
???document // 整个文档是一个文档节点 ???element //每个 HTML 元素是元素节点 ???text //HTML 元素内的文本是文本节点 ???attribute //每个 HTML 属性是属性节点 ???comment //注释是注释节点
各结点属性
???attributes ???//节点（元素）的属性节点 ???nodeType ?????//节点类型 ???nodeValue ????//节点值 ???nodeName ?????//节点名称 ???innerHTML ????//节点所包含的所有元素 ???innerText ????//节点所包含的所有文本元素
导航属性
???parentNode ??????//节点（元素）的父节点 (推荐) ???firstChild ??????//节点下第一个子元素 ???lastChild ???????//节点下最后一个子元素 ???childNodes ??????//节点（元素）的子节点
推荐导航属性
???parentElement ???????????????//父节点标签元素 ???children ????????????????????//所有子标签 ???firstElementChild ???????????//第一个子标签元素 ???lastElementChild ????????????//最后一个子标签元素 ???nextElementtSibling ?????????//下一个兄弟标签元素 ???previousElementSibling ??????//上一个兄弟标签元素
访问HTML属性
???getElementById() ?????????//通过id属性访问，不支持局部查找 ???getElementsByTagName() ???//通过标签名字访问 ???getElementsByClassName() ?//通过class名字访问 ???getElementsByName() ??????//通过属性名字访问，不支持局部查找
DOM结点的具体用法
下面是用于测试的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);
JS-DOM对象
原文地址：https://www.cnblogs.com/Lynnblog/p/9158012.html