【九月打卡】第21天 前端工程师2022版DOM第一讲

课程名称：前端工程师2022版

课程章节：DOM

课程讲师： elex

课程内容：

                    nodeName    nodeType    nodeValue

元素节点        标签名            1                    null

属性节点        属性名            2                    属性值

文本节点        #text              3                    文本内容（不包含html）

节点的 nodeType 属性可以显示这个节点具体的类型

    1        元素节点，例如 <p> 和 <div>

    2        属性节点

    3        文本节点

    8        注释节点

    9        document 节点

    10      DTD 节点

注：

    1. 文字内容，包括空白字符

    2. DTD（!DOCTYPE）是一个单独节点，与 html 同级

document：

    1. 访问元素节点主要依靠 document 对象

    2. 几乎所有 DOM 的功能都封装在了 document  对象中

    3. document 对象也表示整个 HTML 文档，他是 DOM 节点树的根

获取元素节点的方法：

    id

        格式：document.getElementById("id");

        参数：id 标签id值（唯一的）

        功能：通过 id 获取元素节点

        返回值：获取的元素节点

        注：存在相同 id 只获取第一个，也不允许出现相同 id

    tag

        格式：document/node.getElementsByTagName("tag");

        参数：tag 标签名

        功能：获取对应节点下所有标签名为 tag 的元素节点

        返回值：HTMLCollection

    class

        格式：document/node.getElementsByClassName("class");

        参数：class 标签的class属性值

        功能：获取对应节点下所有类名为 class 的元素节点

        返回值：HTMLCollection

    querySelector

        格式：document.querySelector("selector");

        参数：selector CSS选择器

        功能：通过选择器获取第一个元素节点

        返回值：元素节点对象

    querySelectorAll

        格式：document.querySelectorAll("selector");

        参数：selector CSS选择器

        功能：通过选择器获取全部的元素节点

        返回值：NodeList

    name

        格式：document.getElementsByName("name");

        参数： name 属性值

        功能：通过 name 属性值获取元素节点

        返回值：NodeList

获取子节点：

    childNodes

        格式：node.childNodes;

        参数：无

        功能：返回所有子节点，包含元素节点和文本节点

        返回值：NodeList

    children

        格式：node.children;

        参数：无

        功能：获取所有子元素节点

        返回值：HTMLCollection

    first(Element)Child

        格式：node.first(Element)Child;

        参数：无

        功能：获取第一个子（元素）节点

        返回值：节点对象

    last(Element)Child

        格式：node.last(Element)Child;

        参数：无

        功能：获取最后一个子（元素）节点

        返回值：节点对象

获取同级节点：

    next(Element)Sibling

        格式：node.next(Element)Sibling;

        参数：无

        功能：获取下一个同级（元素）节点

        返回值：节点对象

    previous(Element)Sibling

        格式：node.previous(Element)Sibling;

        参数：无

        功能：获取上一个同级（元素）节点

        返回值：节点对象

获取父节点：

    parentNode

        格式：node.parentNode;

        参数：无

        功能：返回父元素节点

        返回值：节点对象

获取/设置节点中内容：

    innerHTML

        格式：node.innerHTML（ = "str"）;

        参数：str 内容字符串

        功能：获取/设置标签内容，可以解析 HTML 标签

        返回值：字符串类型的标签内容

    innerText

        格式：node.innerText（ = "str"）;

        参数：str 内容字符串

        功能：获取/设置标签内容，无法解析 HTML 标签

        返回值：字符串类型的标签内容，纯文本不含标签

节点操作：

    document.write()

        将参数写入页面，解析标签

        注：直接使用会覆盖页面上的所有内容

    创建节点：

        createElement

            格式：document.createElement(tag);

            参数：tag 创建的元素节点名，字符串格式

            功能：创建一个元素节点

            返回值：创建的元素节点

        createTextNode

            格式：document.createElement(text);

            参数：text 创建的文本节点内容，数字类型会自动转换为字符串格式

            功能：创建一个文本节点

            返回值：创建的文本节点

    插入节点：

        appendChild

            格式：node.appendChild(node2);

            参数：node2 添加的节点

            功能：将节点添加父节点的最后，若是已存在节点，则会清除原节点

            返回值：添加的节点

        insertBefore

            格式：node.replaceNode(newNode, posNode);

            参数：newNode 新节点，posNode 目标位置节点

            功能：在目标位置节点之前插入新节点，并移除原newNode

            返回值：插入的节点

    删除节点：

        removeChild

                格式：node.removeChild(node2);

                参数：node2 被清除的子节点

                功能：从元素中移除子节点

                返回值：被清除的子节点

    替换节点：

        replaceNode

            格式：node.replaceNode(newNode, oldNode);

            参数：newNode 新节点，oldNode 被替换的节点

            功能：替换节点，并移除原 newNode

            返回值：被替换的节点

        outerHTML

            格式：node.outerHTML（ = "str"）;

            参数：str 内容字符串

            功能：获取/替换节点，node 仍他在内存中保留

            返回值：标签间内容，外加标签自身

            注：node 不再是文档树的一部分，新段替换了它，但仍然在内存中

    克隆节点：

        cloneNode

            格式：node.cloneNode(deep);

            参数：deep 布尔值 可选，true 深克隆 ，默认 false 只克隆目标节点

            功能：克隆节点（包括属性及其值），产生副本返回

            返回值：克隆的节点

获取/设置属性节点：

    .attr

        格式：node.attr（ = "value"）;

        参数：attr 属性名，如 id src style，小驼峰形式；value 设置的属性值

        功能：获取/设置符合 W3C 规范的行内属性

        返回值：属性值，若未设置此属性则返回 undefined

        注：获取的颜色样式自动换为 rgb 形式，英文单词除外

    get/setAttribute

        格式：node.get/setAttribute("name"（, set下有 "value"）);

        参数：name 属性名 必需，value 属性值 必需

        功能：获取/设置/添加属性节点，包括自定义属性

        返回值：get 下为属性值，set 下为 undefined

    attributes

        格式：node.attributes;

        参数：无

        功能：返回当前元素节点上，所有行内属性节点

        返回值：属性节点集合（不重复、无序）对象

        使用：node.attributes.getNamedItem("name") 或 node.attributes["name"];

注：

    element.class    元素添加了个 class 属性（系统初始是不带的）

    element.className    设置对应元素的 class 名（系统本身就有的）

        1. className 的属性值为字符串，赋值时会覆盖之前的值

        2. 可以使用 classList 属性内的方法修改类名

    HTML5 添加了“data-”方式来自定义属性

        data-abc-a

            dateset.abcA = 属性值    获取/设置属性值

课程收获：

谢谢老师，讲的非常细致，很容易懂。