js 获取元素5种的方式
1、标签获取元素
getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的集合。
语法： document.getElementsByTagName(‘元素的标签名’)[下标];
<body> <p id="demo">Hello World!</p> <p id="pro">Hi Jhon!</p> </body> <script> //根据标签改变字体颜色 var tagname = document.getElementsByTagName("p")[0]; tagname.style.color = "skyblue"; </script>
2、id获取元素
getElementById() 返回一个匹配特定ID的元素
语法： document.getElementById(‘id’);
<body> <p id="demo">Hello World!</p> <button onclick="change()">点击改变</button> </body> <script> function change() { var element = document.getElementById("demo"); element.style.color = 'green'; } </script>
3、通过class名字获取页面元素
getElementsByClassName()方法返回一个包含了所有指定类名的子元素的类数组对象，作为nodeList对象。
语法：document.getElementsByClassName(‘类名’)[下标];
<body> <p>hello world</p> <p class="text">类名为test</p> <div class="red text">第一个div</div> <div class="red">第二个div</div> </body> <script> //匹配类名的元素集合，不是元素本身 console.log(document.getElementsByClassName("text")); //获取类名为text的第一个元素 console.log(document.getElementsByClassName("text")[0]); //获取包含red text类名的所有元素 console.log(document.getElementsByClassName("red text")); //查看类名为text的元素的长度 console.log(document.getElementsByClassName("text").length); </script>
4、通过CSS选择符方式获取页面元素
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
语法：var str = document.querySelector();
<p>hello world</p> <script> document.querySelector("p").style.backgroundColor = "pink"; </script>
5、通过元素的name属性的值获取一组元素
getElementsByName():根据给定的name值返回指定名称的对象集合。
语法： getElementsByName(‘name属性’)[下标]
<body> <input type="text" name="input"> <input type="text" name="input"> <input type="text" name="input"> <div name="div1"></div> </body> <script> //返回name属性为input的数量 var input = document.getElementsByName("input"); console.log(input.length); //返回name属性为div1的元素 var div = document.getElementsByName("div1"); console.log(div[0].tagName); </script>
6、获取HTML元素
documentElement属性以一个元素对象返回一个文档的文档元素
(documentElement是一个会返回文档对象的根元素的只读属性)
documentElement是整个节点树的根节点，即html标签 HTML文档返回对象为HTML元素
如果HTML元素缺失，返回值为null
<body> <button onclick="underline()">显示节点名称</button> </body> <script> console.log(document.documentElement); console.log(document.body); function underline() { //获得根元素的节点名称 //nodeName属性指定节点的节点名称 //1、如果节点是元素节点，则nodeName属性返回标签名； //2、如果节点是属性节点，则nodeName属性返回属性的名称； //3、如果节点是文本节点，nodeName属性返回的永远是#text //4、如果节点是文档节点，nodeName属性返回的永远是#document console.log(document.documentElement.nodeName); } </script>
