5.11 dom的选择器

Posted 2020-12-15 xiaokeai233

# 一、DOM
## 0. js的三大组成部分的关系
- ECMAScript规定，如何在BOM中操作DOM
## 1. 介绍
1. DOM文档对象模型，对象：document
    - DOM（W3C机构）不属于BOM（浏览器厂商）
    - window对象身上有提供document对象
    - DOM，主要控制页面（html文件），所有的页面操作都需要通过DOM
    - DOM的结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）
    - html根元素：head，body
    - DOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本）
        - 所有节点，都是对象
    - js做交互，行为，页面（DOM），哪个元素，选择器，属性，内容，样式，元素等等

2. 选择器
    - 元素节点选择器(只有元素节点)
        - 直接选择器
            - id选择器：document.getElementById("id名")
            - class选择器：document.getElementsByClassName("class名")
            - tag选择器：document.getElementsByTagName("tag名")
            - name选择器：document.getElementsByName("name名")
            - ES5新增选择器：
                - querySelector选择器：document.querySelector("css选择器")
                - querySelectorAll选择器：document.querySelectorAll("css选择器")
            - 总结：
                - 返回单个元素：
                    - id，querySelector
                - 返回数组：
                    - class，tag，name，querySelectorAll

        - 关系选择器：先有基准元素
            - 父子关系（母女关系）
                - 父选子：先拿到父
                    ```js
                    // 父选子：先拿到父
                    var olist = document.querySelector(".list");
                    // var olist = document.getElementsByClassName("list")[0];
                    console.log(olist);
                    // 第一个子：
                    console.log(olist.firstElementChild);
                    // 最后一个子：
                    console.log(olist.lastElementChild);
                    // 所有子：
                    console.log(olist.children);
                    // 其他的子：
                    // console.log(olist.children[索引]);
                    ```
                - 子选父：先拿到子
                    ```js
                    // var oEm = document.querySelector("em");
                    var oEm = document.getElementsByTagName("em")[0];
                    // 子选父：一个！直接的父级！
                    console.log(oEm.parentNode);
                    console.log(oEm.parentNode.parentNode);
                    ```
            - 兄弟关系（姐妹关系）
                ```js
                // 先选择当前
                var olist = document.querySelector(".list");
                ```
                - 哥：谁的哥（上一个兄弟）
                ```js
                // 上一个（哥）：
                console.log(olist.previousElementSibling);
                ```
                - 弟：谁的弟（下一个兄弟）
                ```js
                // 下一个（弟）：
                console.log(olist.nextElementSibling);
                ```

    - 节点选择器(元素，属性，注释，文本)
        - 元素，注释，文本，参与了父子或兄弟关系
            - 利用关系选择
            - 父元素节点.childNodes
            - 当前元素.previousSibling
            - 当前元素.nextSibling
            -

        - 属性，没有参与这种家族关系，更像是元素身上的衣服
            - 单独选择器
            - 当前元素.attributes
            - 节点的过滤属性：
 var obox = document.getElementById("box");

    var attr = obox.attributes;
    console.log(attr);
    console.log(attr.length);

    // for(var i=0;i<attr.length;i++){
    //     console.log(attr[i]);
    // }

    console.log(attr[3]);
    console.log(attr[3].nodeType);
    console.log(attr[3].nodeName);
    console.log(attr[3].nodeValue);

        - 节点选择器和节点的过滤属性，一般只用来做选择或过滤，不用来做修改等操作，有单独的操作方法

3. 节点的过滤属性

||nodeType|nodeName|nodeValue
|-|:-:|:-:|:-:|
|元素|1|大写标签名|null|
|文本|3|#text|文本内容|
|注释|8|#comment|注释内容|
|属性|2|属性名|属性值|
|根document|9|document|null|

4. 操作：增删改查
    - 属性操作
        - 可见属性
            - 内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
                - 对象操作：1点语法；2中括号语法
                - 也可以使用：getAttribute、setAttribute、removeAttribute
                - 特殊的属性：
                    - class：要使用className操作
                    - style：样式，值是个对象

            - 非内置：在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性
                - 元素.getAttribute("要获取的属性名")
                - 元素.setAttribute("要设置的属性名","属性值")
                - 元素.removeAttribute("要删除的属性名")

           

        - 不可见属性
            - 内置：不用写在标签身上，系统提供，具有功能
                - 对象操作：1点语法；2中括号语法
            - 非内置：放飞自我，看不见的自定义属性，其实就是将元素，作为一个对象数据，进行操作
                - 元素是个对象，对象可以用来存储数据，多存储一些
                - 对象操作
                - 注意：别和内置的重复

    - 样式操作

    - 元素操作