获取元素子节点

1.获取元素子节点

     a.获取父元素
     b.获取子元素 
语法: 父元素.children //获取子节点 
     父元素.childNodes //获取元素的子元素
     注意:children这个会识别换行把它识别为一个空的text

2.获取第一个子节点

     a.获取父元素
     b.获取第一个子元素 语法: 
     父元素.firstChild //获取第一个子节点   
     父元素.firstElementChild //获取元素第一个子元素   

3.获取最后一个元素

     a.获取父元素
     b.获取最后一个元素 
语法:父元素.lastChild //获取最后一个子节点
     父元素.lastEelmentChild //获取最后一个子元素
注意:1-3都是包含结构

4.获取下一个兄弟节点

     a.拿到下一个的上一个
     b.获取下一个元素
语法:a.nextSibling  //获取下一个兄弟节点
     a.nextElementSibling  //获取下一个兄弟元素节点

5.获取上一个兄弟节点

     a.拿到上一个的下一个
     b.拿到上一个  
语法:a.previousSibling  //获取上一个兄弟节点
    a.previousEiementSibling  //获取上一个兄弟元素节点

6.获取元素的父级节点

     a.获取子元素
     b.获取父元素 
语法:子元素.parentNode  //获取元素的节点

7.节点的分类

     a.元素节点
语法: 以上有Element就是元素的节点
     b.文本节点
     c.属性节点
语法:元素.attribtes  这个是一个数组要写下标
例如: 
        html部分
        <ul x="100" y="200">
        <li>我是ul的子级</li>
    </ul>
    js部分
       // 节点分类
        var oUl = document.querySelector('ul')

        //  元素节点
        var ele = oUl.firstElementChild
        // console.log(ele)

        // 文本节点
        var text = oUl.firstChild
        // console.log(text)

        // 属性节点
        var attr = oUl.attributes[0]
        // console.log(attr)

8.节点的类型(nodeType)

语法:监测对象.nodeType
     元素节点  1
     文本节点  3
     属性节点  2

9.节点名称 nodeName

语法:监测对象.nodeName
     元素节点  大写的标签名
     文本节点  第一个节点的名称
     属性节点  属性名

10.节点的值 nodeValue

语法:监测的对象.nodeValue
     元素节点 nodeValue没有这个
     文本节点 第一个节点的内容
     属性节点 实际的属性值

补充:获取元素类名
     a.获取元素
     b.获取语法:元素.className

11.设置元素类型

元素.className = "新的类名" 会覆盖前面的class名字

第二种获取语法
元素.classList
设置语法:元素.classList.add("新的类名") 加在后面
删除语法:元素.calssList.remove("删除的属性值")

12.获取元素的样式

获取元素样式
语法:元素.style.标签(属性名)  只能设置行内样式
有background-color //不能这样写 
解决方法要不然用驼峰命名 或者中挎号语法['background-color']
设置元素样式
元素.style.标签(属性名) = "要设置的属性值"
获取非行内样式 
window.getComputedStyle(元素).属性名
注意:这个不能修改只能获取