5.11 dom的选择器

liaoxuewu 2020-05-11

# 一、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中括号语法
            - 非内置:放飞自我,看不见的自定义属性,其实就是将元素,作为一个对象数据,进行操作
                - 元素是个对象,对象可以用来存储数据,多存储一些
                - 对象操作
                - 注意:别和内置的重复
    - 样式操作
    - 元素操作
 

相关推荐