JavaScript之DOM对象（Node结点属性、导航属性、页面查找）

文章目录

DOM与Node节点
自身属性
导航属性
页面查找

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.nextElementSiblingconsole.log(a_ele3.innerHTML);console.log(a_ele3.innerText);  //获取标签内文本a_ele3.innerHTML="<h1>替换内容！</h1>";</script>
</body>
</html>

4、测试结果

JavaScript之DOM对象（Node结点属性、导航属性、页面查找）相关推荐

JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
JavaScript基础——第三章，JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系访问节点使用getElement系列方法访问指定节点根据层次关系访问节点 ...
JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点更新:更新Dom节点添加:添加一个新的节点删除:删除一个Dom节点要操作一个Do ...
JavaScript之DOM对象
JavaScript之DOM对象 DOM概述 (Element)元素节点对象获取Element对象操作Element对象及元素对象常见属性 value className checked inne ...
JavaScript 的DOM对象
JavaScript 的DOM对象 1.DOM对象的概念 1.DOM:文档对象模型(Document Object Model) 2.document对象,是DOM中的顶级对象,封装了HTML的相关属 ...
前端入门之——javascript day8 DOM对象(DHTML)
DOM对象(DHTML) 7.1 什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平 ...
JavaScript操作DOM对象
目录一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
html 删除一个属性值,html之DOM对象removeAttribute()方法(删除节点属性)功能简介说明...
摘要: 下文讲述DOM对象removeAttribute()方法功能说明,如下所示: DOM removeAttribute()方法功能说明 DOM removeAttribute()方法功能(): ...