JavaScript学习日常知识点-12

一、查看元素节点

    <div id ="box">
        hello
    </div>

var  a = document.getElementById("box")//div元素对象
    //节点类型
    //元素1  属性2 文本3
    // console.log(a.nodeName)//节点名称 div
    // console.log(a.tagName)//标签名称 
    // console.log(a.nodeType)// 1 代表元素节点
    // console.log(a.nodeValue)// null 节点值

二、节点查找

    <ul id="box">
        <li id="li">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

var a = document.getElementById("box")

    // console.log(a.children) // 所有的子元素对象
    // console.log(a.firstElementChild)//第一个元素节点
    // console.log(a.lastElementChild)//最后一个元素节点
    // console.log(a.childNodes.length)// 7


var li =document.getElementById("li")


    // 子节点查找父节点
    //子节点对象.parentNode 通过子节点查找父节点
    //子节点对象.parentElement 通过子节点查找父元素
    //console.log(li.parentNode) // 查找父节点
    //console.log(li.parentElement) // 查找父元素

    // 通过父节点对象查找子节点对象（可能会有文本节点）
    // 父节点对象.firstChild
    // 父节点对象.lastChild
    // 父节点对象.childNodes    多个

    // 通过父节点对象查找子元素节点对象

    // 父节点对象.firstElementChild  查找父节点下的第一个子元素节点

    // 父节点对象.lastElementChild  查找父节点下的最后一个子元素节点

    // 父节点对象.children    多个  查找父节点下的所有的子元素节点

三、兄弟之间查找

    <ul id="box">
        <li>列表1</li>
        <li id="li">列表2</li>
        <li>列表3</li>
    </ul>

    var a = document.getElementById("li")
    console.log(a.nextSibling)   // 下一个兄弟节点  可能为文本
    console.log(a.previousSibling) // 上一个兄弟节点
    console.log(a.nextElementSibling)   // 下一个兄弟节点 
    console.log(a.previousElementSibling) // 上一个兄弟节点

四、节点属性操作

    <ul id="box">
        <li id="li">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>


    var a = document.getElementById("box")
    // 节点对象.getAttribute("属性名") 根据属性名获取属性值
    // 节点对象.setAttribute("属性名","属性值") 
    // 节点对象.removeAttribute("属性名")  删除对应的这对属性
    a.getAttribute("id") // 可以获取自定义的属性值
    // 设置
    // a.title = "hello"
    a.setAttribute("title","hello")
    //删除
    a.removeAttribute("title")

五、创建元素对象

    <div id="box">
        hello 
    </div>


        var span = document.createElement("span")
        span.innerHTML="哈哈哈"

        //追加
        a.appendChild(span)


        // 创建元素对象
        // document.createElement("元素名称")
        // 追加元素对象到父元素的内部最后
        // 父节点对象.appendChild(子节点)