提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

第121篇: DOM常用类型（Document、Element）

2023-04-18 15:19:23 时间

好家伙，本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记

 

1.Document类型

Document 类型是 JavaScript 中表示文档节点的类型。

在浏览器中，文档对象 document 是 HTMLDocument 的实例（HTMLDocument 继承 Document），表示整个 HTML 页面。

document 是 window 对象的属性，因此是一个全局对象。

（文档节点，html标签的上级）

1.1.文档子节点

　　使用 documentElement 属性可以更快更直接地访问<html>元素

 

1.2.documentElement和 childNodes[1]都指向同一个值，即 <html>元素。

    console.log(document.documentElement);
    console.log(document.childNodes[0]);
    console.log(document.childNodes[1]);
    console.log(document.firstChild);

 

 

 

1.3.定位元素

DOM 最常见的情形可能就是获取某个或某组元素的引用,

HTMLDocument 类型上定义的获取元素的方法有三个

getElementById()这个方法你应该再熟悉不过了

唯一需要注意的就是如果页面中存在多个具有相同 ID 的元素，则 getElementById()返回在文档中出现的第一个元素。

 

所以我们来讲讲getElementsByTagName()方法

 

在此之前，我们需要知道两个集合

HTMLCollection 和 NodeList

HTMLCollection 和 NodeList 的区别 - 掘金 (juejin.cn)

(1)HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 arguments 相似的类数组 (array-like) 对象），

还提供了用来从该集合中选择元素的方法和属性。

 

(2)NodeList 对象是节点的集合，通常是由属性，如Node.childNodes 和 方法，如document.querySelectorAll 返回的。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　---来自MDN文档

试用一下：

console.log(document.body.childNodes);

 

 

 

 

所以我们大概可以知道，NodeList 对象是节点的集合，HTMLCollection 是元素的集合，且两者都是实时的。

 

getElementsByTagName()方法：

getElementsByTagName()是另一个常用来获取元素引用的方法。

这个方法接收一个参数，即要 获取元素的标签名，返回包含零个或多个元素的 NodeList。

在 HTML 文档中，这个方法返回一个 HTMLCollection 对象。

let div = document.getElementsByTagName("div");
    console.log(div)
    console.log(div[1].id)
    console.log(div.item(1).id)

 

 

 

 

2.Element 类型

除了Document 类型，Element 类型就是Web开发中最常用的类型了。

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。

这个接口描述了所有相同种类的元素所普遍具有的方法和属性。

HTMLElement 接口表示所有的 HTML 元素。

Element 表示XML或HTML 元素，对外暴露出访问元素标签名、子节点和属性的能力。（最常用div元素就是Element类型）

所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。

 

2.1.div属性

 id，元素在文档中的唯一标识符；

 title，包含元素的额外信息，通常以提示条形式展示；

 lang，元素内容的语言代码（很少用）；

 dir，语言的书写方向（"ltr"表示从左到右，"rtl"表示从右到左，同样很少用）；

 className，相当于 class 属性，用于指定元素的 CSS 类（因为 class 是 ECMAScript 关键字， 所以不能直接用这个名字）。

所有这些都可以用来获取对应的属性值，也可以用来修改相应的值。

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

总之他们都是div的属性就对了

 

2.2.div属性方法

属性相关的 DOM 方法 主要有 3 个：getAttribute()、setAttribute()和 removeAttribute()。

（查，改，删）

    let div = document.getElementById("div1");

    console.log(div);

    console.log(div.getAttribute("id"));

    console.log(div.setAttribute("id","div3"));

    console.log(div.removeAttribute("class"));

 

2.3.创建元素

使用 document.createElement()方法创建新元素(这个用的多了)

let div = document.createElement("div");

 

在新元素上设置这些属性只会附加信息。因为这个元素还没有添加到文档树，所以不会影响浏览器 显示。

要把元素添加到文档树，可以使用 appendChild()、insertBefore()或 replaceChild()。（其中appendChild()最常用） 

 

document.body.appendChild(div);

元素被添加到文档树之后，浏览器会立即将其渲染出来。之后再对这个元素所做的任何修改，都会 立即在浏览器中反映出来。

 

相关文章