本文教程操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。
1、通过id来获取dom节点
getElementById 是通过标签的 id 名称来获取标签的,返回的是一个HTML的节点信息。
<div id="box">我是通过ID选择器选择的</div> <script> var divid = document.getElementById("box"); console.log(divid); </script>
2、通过class来获取dom节点
getElementsByClassName 是通过标签的 class 名称来获取标签的,返回的是一个HTMLCollection对象。
<div class="box"></div> <div class="box"></div> <script> let boxCollection= document.getElementsByClassName("box"); let box1 = boxList[0]; let box2 = boxList[1]; </script>
3、通过name来获取dom节点
getElementsByName 是通过过标签的name名称来获取标签的返回的是一个NodeList对象。
<div id="box"> <input type="text" name="user" /> </div> <script> let userInput= document.getElementsByName("user"); </script>
4、通过tagName(标签名)来获取dom节点
getElementsByTagName 是通过过标签的标签名称来获取标签的,返回的是一个HTMLCollection对象。
<body> <div></div> <script> var box = document.getElementsByTagName('div') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
以上就是小编整理总结的四种JavaScript获取dom节点的方法,希望能帮助你理解哦~更多JavaScript学习推荐:JavaScript教程。