文章目录
DOM与Node节点
1、DOM的概念
DOM 是 W3C(万维网联盟)的标准,DOM 定义了访问 HTML 和 XML 文档的标准。
W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
2、DOM的分类
- 核心 DOM : 针对任何结构化文档的标准模型
- XML DOM : 针对 XML 文档的标准模型,定义了所有 XML 元素的对象和属性,以及访问它们的方法。
- HTML DOM :针对 HTML 文档的标准模型,定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
3、DOM节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点(NODE):
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
4、DOM节点关系图
自身属性
1、属性
- attributes - 节点(元素)的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点的文本值(显示在页面上的内容)
2、测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
<p name="p_label" class="p1">P文本</p>
<div class="div2">DIV2文本
<div div3>DIV3文本</div>
<a href="">A文本</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; //获取所有class为p1的元素,0表示第一个元素名
//自身节点属性
console.log(ele);
console.log(ele.nodeName); //元素名
console.log(ele.nodeType); //元素格式
console.log(ele.nodeValue); //元素值
console.log(ele.innerHTML); //在控制台显示节点内容
ele.innerHTML="Hello JavaScript"; //改变节点的内容(显示在html页面上的内容)
</script>
</body>
</html>
3、测试结果:
导航属性
1、属性
- parentNode - 节点(元素)的父节点 (推荐多用)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点(元素)的子节点
2、测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
<p name="p_label" class="p1">P文本</p>
<div class="div2">DIV2文本
<div div3>DIV3文本</div>
<a href="">A文本</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; //获取所有class为p1的元素,0表示第一个元素名
//导航属性
var a_ele=ele.parentNode; //获取一个新的element对象
console.log(a_ele.nodeName);
var b_ele=ele.nextSibling;
console.log(b_ele.nextSibling);
var c_ele=ele.nextElementSibling;
console.log(c_ele.nodeName);
console.log(c_ele.innerHTML);
var ele2=document.getElementsByClassName("div1")[0];
console.log(ele2.children);
console.log(ele2.children[1].children); //获取div1下的第二个元素(div2)的children,即div3和a标签
</script>
</body>
</html>
3、测试结果:
页面查找
1、各节点的层级关系
2、页面查找方法
1)全局查找标签
- 使用 document.getElementById() 方法
- 使用 document.getElementsByTagName() 方法
- 使用 document.getElementsByClassName() 方法
- 使用 document.getElementsByName() 方法
2)标签内查找标签
- element.getElementsByTagName()
- element.getElementsByClassName()
3、测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
<p name="p_label" class="p1">P文本</p>
<div class="div2">DIV2文本
<div div3>DIV3文本</div>
<a href="">A文本</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; //获取所有class为p1的元素,0表示第一个元素名
//获取p标签的“兄弟姐妹”
var ele3=document.getElementsByName("p_label")[0];
// console.log(ele3); //获取p标签
a_ele3=ele3.nextElementSibling
console.log(a_ele3.innerHTML);
console.log(a_ele3.innerText); //获取标签内文本
a_ele3.innerHTML="<h1>替换内容!</h1>";
</script>
</body>
</html>
4、测试结果