js 获取元素的方式

js 获取元素5种的方式1、标签获取元素getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的集合。语法：document.getElementsByTagName(‘元素的标签名’);<body><p id="demo">Hello World!</p><p id="pro">Hi Jhon!</p>&

Dcripple

17776人浏览 · 2021-05-20 19:51:11

Dcripple · 2021-05-20 19:51:11 发布

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

语法：var element = document.documentElement;

<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>