js高级程序设计学习-DOM操作

917 阅读6分钟

导言

Dom(文档对象模型)是 针对 HTML 文档的一个 API. DOM 描述了一个层次化的节点树。

Node 类型

javaScript中的所有节点类型都继承自 Node类型 , 因此所有节点类型都共享者相同的基本属性和方法
每个节点都有一个 nodeType 属性, 用于表明节点的类型。 节点类型由 Node 类型中定义的下列 12 个数值常量来表示 , 任何节点类型必须是其中一个。

  • Node.ELEMENT_NODE(1) 元素节点
  • Node.ATTRIBUTE_NODE(2) 属性节点
  • Node.TEXT_NODE(3) 文本节点
  • Node.COMMENT_NODE(8) 注释节点
  • Node.DOCUMENT_NODE(9) Document 根节点
  • Node.DOCUMENT_FRAGMENT_NODE(11) 碎片化文档

1.nodeName 和 nodeValue 属性

这两个属性的值完全取决于节点的类型。

if(someNode.nodeType === 1) {
    let value = someNode.nodeName;
}

对于元素节点, nodeName 中保存的始终都是元素的标签名.

Document 类型

js通过 Document 类型表示文档。 在浏览器中 , document 对象是 HTMLDocument 的一个实例, 表示整个 HTML 页面。 而且, document对象是 window对象的一个属性 , 因此可以将其作为全局对象来访问。Document 节点具有下列特性:

  • nodeType 的值为 9
  • nodeName 的值为 "#document"
  • nodeValue 的值为 null
  • parentNode 的值为 null

通过 Document对象,不仅仅可以获取与页面有关的信息,而且还能操作页面的外观及其底层结构

1.文档的子节点

  • documentElement 属性 --- 该属性始终指向 HTML 页面中的 元素
  • body 属性 --- 取得对 的引用
  • doctype 属性 --- 取得对<!DOCTYPE> 的引用

2. 文档信息

  • document.title 文档标题
  • document.URL 文档域名
  • document.referrer 文档来源页面的 URL

3. 查找元素

其中 , Document 类型为此提供了两个方法 :

  • getElementById
<div id="myDiv">hello world</div>
var div = document.getElementById('myDiv');
  • getElementsByTagName 这个方法接受一个参数, 即要取得元素的标签名, 而返回的是包含 零 或多个元素的 NodeList。在HTML文档中, 这个方法会返回一个 HTMLCollection 对象, 作为一个 动态集合。
    获取页面中收邮件的 元素, 并返回一个 HTMLCollection
var images = document.getElementsByTagName('img');
console.log(images.length); // 输出图像的数量
console.log(images[0].src); // 输出第一个图像元素的 src 特性
  • getElementsByName 顾名思义, 这个方法会返回带有给定 name 特性的所以元素。

4.特殊集合

document对象还有一些特殊的集合。

  • document.anchors - 包含文档中所有带 name 特性的 <\a>元素

  • document.forms - 包含文档中所有的

    元素, document.getElementsByTagName('form')相同

  • document.images - 包含文档中所有的 元素, 与document.getElementsByTagName('img')相同

  • document.links - 包含文档中所有带 href 特性的 <\a> 元素

Element类型

除了 Document类型之外, Element类型就要算是 Web编程中最常用的类型了。 Element节点具有以下特征:

  • nodeType 的值为1
  • nodeName 的值为元素标签名
  • nodeValue 的值为 null
  • parentNode 可能是 Document 或 Element
  • 其子节点可能是 Element , Text

1.HTML元素

所有HTML元素都由 HTMLElement 类型表示, 不是直接通过这个类型,也是通过它的类型来表示。HTMLElement 类型直接继承自 Element 并添加了一些属性,元素中都存在的下列标准特性:

  • id,元素在文档中的唯一标识符
  • title, 有关元素的附加说明信息, 一般通过工具提示条显示出来。
  • className: 与元素的 class 特性对应,即为元素指定的 CSS 类。

2.取得特性

操作特性的DOM方法主要有3个:

  • getAttribute()
  • setAttribute()
  • removeAttribute()
<div id="myDiv" class="bd" title="Body text" lang="en" dir="auto">hello world</div>
<script>
    var div = document.getElementById('myDiv');
    console.log(div.getAttribute('id')); // myDiv
    console.log(div.getAttribute('class')); // bd
</script>

3.设置特性

所谓的自定义属性

  • setAttribute(),接收两个参数:要设置的特性名和值 如果特性已经存在,setAttribute()会以指定的值替代现有的值

4.attributes 属性

Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。拥有下列方法:

5.创建元素

<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button onclick="append()">添加</button>
const div = document.createElement('div');
const ul = document.querySelector('.ul');
ul.appendChild(div);

把节点添加到DOM有以下方法

  • appendChild --- 可向节点的子节点列表的末尾添加新的子节点。
  • insertBefore --- 方法在您指定的已有子节点之前插入新的子节点
  • replaceChild --- 方法可将某个子节点替换为另一个。

6.元素的子节点

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    const element = document.getElementById('myList');
    function display(element) {
        const cNodes = element.childNodes;
        for(let i = 0 ; i < cNodes.length ; i ++) {
            if(cNodes[i].nodeType === 1) {
                console.log(cNodes[i].nodeName)
            }
        }
    }
</script>

Text类型

文本节点由 Text 类型表示, 包含的是可以照字面解释的纯文本内容。 纯文本中可以包含转义后的 HTML 字符, 但不能包含 HTML代码。

  • nodeType的值为 3
  • nodeName 的值为 #text
  • nodeValue 的值为节点所包含的文本
  • parentNode 是一个 Element

1.创建文本节点

  • document.createTextNode()

DocumentFragment类型

在所有节点.只有 DocumentFragment 在文档没有对应的标记。DOM 规定了文档片段 是 一种 轻量级的文档。

  • nodeType 的值为 11
  • nodeName 的值为 "#document-fragment"

虽然不能把文档片段直接添加到文档中,但可以将它作为一个 仓库来使用
要创建文档片段

  • document.createDocumentFragment()
<ul id="myList"></ul>
<script>
    let fragment = document.createDocumentFragment();
    let ul = document.getElementById('myList');
    let li = null;
    
    for(let i = 0 ; i < 3 ; i ++) {
        li = document.createElement('li');
        li.appendChild(document.createTextNode('hello'));
        fragment.appendChild(li)
    }
    console.log(fragment)
    ul.appendChild(fragment)
</script>

DOM扩展

对于 DOM 扩展主要有两个方面:

  • Selector (选择符)API
  • HTML5

querySelector()

众多 javaScript 库中最常用的一项功能 , 就是根据 CSS 选择符选择与某个模式匹配的 DOM元素。 从而抛开了 getElementById() 和 getElementsByTagName()

  • querySelector()方法 querySelector()方法接收一个 CSS选择符, 返回与该模式匹配的第一个元素, 如果没有找到匹配的元素,返回 null.

常见的CSS选择符

  • .class 通过类名选择节点
  • #id 通过 id 名选择节点
  • 选择所有元素 *
  • element p 选择所有

    元素

  • element,element div,p 选择所有
    元素和所有

    元素

  • element element div p 选择
    元素内部的所有

    元素

  • element > element div > p 选择父元素为
    元素的所有

    元素

  • element+element div + p 选择紧接在
    元素之后的所有

    元素

  • [attribute] [target] 选择带有 target 属性的所有元素
  • [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素

querySelectorAll()

querySelectorAll()方法接收从参数与 querySelector() 方法一样, 都是一个 CSS 选择符 , 但返回的是所有匹配的元素而不仅仅是一个元素。

通过元素类型的方法查找节点

  1. document.getElementById
  2. document.getElementsByTagName
  3. document.getElementsByClassName
  4. document.getElementsByName
  5. document.querySelector
  6. document.querySelectorAll