JS基础之DOM文档对象模型的简单介绍及节点和网页元素的基本操作

ECMA Script

DOM:文档对象模型

1. DOM(Document Object Model) 理解

    目标：

        js提供的操作网页文档的接口

    DOM树（标签 - 结点，整个网页 - 节点树）

    js会把整个网页变为一颗节点树，可以通过dom操作去操作节点树，从而对网页进行操作

    节点：Node

    节点对象有三个属性

        nodeValue

        nodeType

        nodeName

    节点的类型

                                                            nodeValue            nodeType            nodeName

        文档节点：Document整个文档      null                          9                     #document

        元素节点：Element html元素         null                          1                    大写标签名

        文本节点：Text文本                  文本内容                       3                       #text

        注释节点：Comment注释                                              8        

        属性节点：Attr属性                      属性值                        2                      属性名

    节点属性

        childNodes: 返回节点的所有子节点

            换行也是个文本结点

        document.body: 返回body节点

        firstChild: 第一个子节点

        lastChild: 最后一个子节点

        attributes: 获取节点的左右属性值

2. 获取节点元素

    根据id获取

    document.getElementById(id名称)

    //返回一个节点对象

    根据name

    document.getElementsByName(name名称)

    //返回一个数组

    根据className类名

    document.getElementsByClassName(类名)

    //返回一个数组

    根据tagName标签名

    document.getElementsByTagName(标签名)

    注：使用时要注意兼容性

    根据选择器来进行查询

    document.querySelector()  // 返回第一个dom节点对象，没有返回NaN

    document.querySelectorAll()//返回一个数组，没有返回空数组

    dom操作很耗性能，修改节点需要重新渲染节点树

    => vue, react, angular  (虚拟dom)

3. 获取元素节点相关的其他节点

    获取上一个节点

        prevSibling: 返回当前节点的上一个节点

        prevElementSibling: 返回当前节点的上一个元素节点

    获取下一个节点

        nextSibling: 返回当前节点的下一个节点

        nextElementSibling: 返回当前节点的下一个元素节点

    获取子节点

        childNodes: 返回当前节点的子节点

        children: 返回当前节点的子元素节点

        firstChild: 返回当前节点的第一个子节点

        firstElementChild: 返回当前节点的第一个子元素节点

        lastChild: 返回当前节点的最后一个子节点

        lastElementChild: 返回当前节点的最后一个子元素节点

    获取父节点

        parentNode: 返回当前节点的父节点

4. document.querySelector 与 document.getElement...的区别

    document.querySelector获取的元素是静态的，不随文档的变化而变化

    document.getElement...获取的元素是动态的

5. 创建节点

    document.createElement();   //创建元素

    document.createTextNode();  //创建文本节点

    父节点.appendChild(子节点):添加子节点

        如果子节点是网页中存在的节点，则移动该节点

   

    父节点.removeChild(子节点):

6. innerText 与 innerHTML

    innerText: 获取或设置元素节点的文本内容

    innerHTML: 获取或设置元素节点的html内容，html标签可以被解析

        使用innerHTML追加元素，会导致js失效

    outerHTML: 获取或设置元素节点的内容，内容标签可被解析，包含自身节点也会被替换