JavaScript中document对象获取节点

    科技2022-07-13  146

    获取节点

    1,通过document对象中的方法获取指定节点 2,通过节点元素本身的位置获取父、子、兄弟节点

    document.getElementById();//id名 document.getElementsByTagName();//标签名 document.getElementsByClassName();//类名 document.getElementsByName();//name document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个元素列表(类数组)

    innerHTML属性

    类数组

    是一种特殊的对象,以数组的方式呈现出来 函数参数列表也是一种类数组,例如都没有push等操作数组方法。

    实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .myClass{ background-color: red; } body{ font-size: 40px; } </style> </head> <body> <div id = "myDiv1"> 我在mydiv1中 <p class="myClass" id = "myP1">我在myP1中</p> <ul id = "ul1"> <li class="myClass" id="li1">1</li> <li id = "li2">2</li> <li id = "li3">3</li> </ul> </div> <script> // var mydiv1 = document.getElementById("myDiv1");//这里就是获取myDiv1 // console.log(mydiv1.innerText);// = "我是修改后的mydiv1中的内容"; // //---------------- // var liList = document.getElementsByTagName("li"); // for(var i = 0; i < liList.length; i++) // { // liList[i].innerText = "我是第"+i+"个li"; // } // //---------------- // var classList = document.getElementsByClassName("myClass"); // for(var i = 0; i < classList.length; i++) // { // classList[i].innerText = "我是使用class的第"+i+"个元素" // } //------------------- var bodyNode = document.querySelectorAll(".myClass"); console.log(bodyNode); console.log(bodyNode[0].innerHTML); console.log(bodyNode[1].innerHTML); </script> </body> </html>
    Processed: 0.013, SQL: 8