py17_02：Dom操作

Dom的操作步骤

　　1. 找到标签。

　　2. 操作标签。

 

查找标签

　　直接查找

        document.getElementById             根据ID获取一个标签
        document.getElementsByName          根据name属性获取标签集合
        document.getElementsByClassName     根据class属性获取标签集合
        document.getElementsByTagName       根据标签名获取标签集合

 

　　间接查找

        parentNode          　　// 父节点
        childNodes        　　  // 所有子节点
        firstChild         　　 // 第一个子节点
        lastChild          　　 // 最后一个子节点
        nextSibling         　　// 下一个兄弟节点
        previousSibling     　　// 上一个兄弟节点
         
        parentElement           // 父节点标签元素
        children                // 所有子标签
        firstElementChild       // 第一个子标签元素
        lastElementChild        // 最后一个子标签元素
        nextElementtSibling     // 下一个兄弟标签元素
        previousElementSibling  // 上一个兄弟标签元素

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

操作标签

 　　1. 文本操作

        innerText   文本，修改值直接在后面用 =‘值’
        outerText
        innerHTML   HTML内容
        innerHTML  
        value       值，获取input框里的内容 

 

 

　　2. 属性操作

 

        attributes                // 获取所有标签属性
        setAttribute(key,value)   // 设置标签属性
        getAttribute(key)         // 获取指定标签属性
        removeAttribute(key)      // 获取指定标签属性

 

 

 

 

 

 

　　3. class操作

        className                // 获取所有类名
        classList.remove(cls)    // 删除指定类
        classList.add(cls)       // 添加类

 

 

 

 

 

　　4. 操作标签之创建

　　1. obj.insertAdjacentHTML，利用对象创建。
　　　　inserAdjacentHTML还在了四个参数
　　　　　　1. beforeBegin, 在标签的最后添加，变成子标签
　　　　　　2. afterBegin，在标签的外面开头添加，形成兄弟标签
　　　　　　3. beforeEnd，在标签的尾部添加，子标签
　　　　　　4. afterEnd，在标签下面添加，兄弟标签
　　2. document.createElement，直接通过Dom创建

 

 

 

 

 

 

 

【完】