访问节点

HTML

<div>
    AI
    <!--注释-->
    <img src="./images/p.jpeg" alt="">
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <p>我是p标签</p>
    <input type="text" value="11223" readonly>
    <h1>22222252</h1>
</div>

JavaScript

<script>

    var myDiv = document.getElementsByTagName("div")[0]

    var myUl = myDiv.getElementsByTagName("ul")[0]

    console.log(myUl.parentNode.innerText)//获取 ul的父节点
    console.log(myDiv.childNodes)//获取div 下的所有子节点 包括 空格注释 回车
    console.log(myDiv.childElementCount)//获取div 下的所有子标签元素个数
    console.log(myDiv.firstChild)//获取div 下的第一个子节点 可以为 空格注释 回车
    console.log(myDiv.firstElementChild)//获取div 下的第一个子 页面元素
    console.log(myDiv.lastChild)//获取div 下的最后一个子节点 可以为 空格注释 回车
    console.log(myDiv.lastElementChild)//获取div 下的最后一个子 页面元素

    console.log(myUl.firstElementChild)//获取ul 下的第一个子 页面元素
    console.log(myUl.firstElementChild.nextElementSibling)//获取ul 下的第二个子 页面元素
    console.log(myUl.firstElementChild.nextElementSibling.nextElementSibling)//获取ul 下的第三个子 页面元素
    console.log(myUl.lastElementChild)//获取ul 下的最后一个子 页面元素
    console.log(myUl.lastElementChild.previousElementSibling)//获取ul 下的最后一个子页面元素相邻的前一个元素
    console.log(myDiv.firstElementChild.getAttribute('src'))//获取某元素的某一个属性值
    myDiv.firstElementChild.setAttribute('src', "./images/p2.jpeg")//给元素设置属性值

    var myA = document.createElement("a")//js创建一个页面元素

    myA.setAttribute("href", "http://www.baidu.com")//给a设置href属性
    myA.innerText = "去百度"//给元素添加文本内容

    myDiv.appendChild(myA);//将新的元素添加到div后面

    document.body.insertBefore(myA, myDiv)//在myDiv 之前插入新的元素


    //移除某个元素的某一个属性
    myDiv.lastElementChild.previousElementSibling.removeAttribute("readonly")

    console.log(myDiv.nodeName)//获取节点名称
    console.log(myDiv.childNodes[0].nodeValue)//获取节点的值  根据节点往下找 找到文本节点才显示值  否则 值为null ==> 不可用
    //移除某一个节点
    var myP = myDiv.getElementsByTagName("p")[0]

    myDiv.removeChild(myP)

    //替换某一个节点.
    var myH1 = myDiv.getElementsByTagName("h1")[0]
    var myH2 = document.createElement("h2")
    myH2.innerText = "h2"

    myDiv.replaceChild(myH2,myH1)


</script>

CSS

 <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            border: 1px solid red;
        }

        div {
            border: 1px solid green;
            padding: 10px;
        }
    </style>

常规
通过父节点获取子节点：
parentObj.firstChild　　 获取已知父节点的第一个子节点
parentObj.lastChild　　 获取已知父节点的最后一个子节点
parentObj.childNodes 获取已知父节点的子节点数组(这里我在IE 7中获取的是所有直接的子节点)
parentObj.children 获取已知节点的直接子节点数组（在IE7中和childNodes效果一样）
parentObj.getElementsByTagName(tagName) 返回已知子节点中类型为指定值的子节点数组
通过临近节点获取兄弟节点：
neighbourNode.previousSibing 获取已知节点的前一个兄弟节点
neighbourNode.nextSibing 获取已知节点的下一个兄弟节点
通过子节点获取父节点：
　　 1、childNode.parentNode 获取已知节点的父节点

上面的方法基本都是可以递归是使用的，parentObj.firstChild.firstChild.firstChild...