您的位置: 首页  >  IT文章  >  Javascript获取元素节点的六种方法(Dom)

Javascript获取元素节点的六种方法(Dom)

分类: IT文章 • 2023-12-16 22:20:25

Javascript中，Dom节点常见的只有三种:分别是元素节点，属性节点，文本节点。我们可以用nodeType值来判断节点的类型，它们对应的nodeType属性值分别是1，2，3。

而获取元素节点，有六种方式。

1.getElementById()

通过id来选中元素。使字变成红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div >Javascript</div>
</body>
<script>
     function func() {
        var oDiv = document.getElementById("div1");
        oDiv.style.color = "red";
    }
    func()
</script>
</html>
2.getElementsByTagName()

通过标签名来选中元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul >
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
<script>
     function func() {
         var oUl = document.getElementById("list");
         var oList = document.getElementsByTagName("li");
         oList[2].style.color = "red";
     }
     func()
</script>
</html>
结果：

Javascript获取元素节点的六种方法(Dom)

3.getElementsByClassName()

通过类名来获取元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul >
        <li>HTML</li>
        <li>CSS</li>
        <li class="select">Javascript</li>
        <li class="select">jQuery</li>
        <li class="select">Vue.js</li>
    </ul>
</body>
<script>
     function func() {
         var oList = document.getElementsByClassName("select");
         oList[0].style.color = "red";
     }
     func()
</script>
</html>
结果与上面相同。
4.querySelector与querySelectorAll()

分别表示满足条件的第一个元素或者所有元素。括号内的写法与CSS选择器的写法一样。

document.querySelectorAll(“.test”)表示获取所有class为test的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
    <div class="test">JavaScript</div>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
</body>
<script>
    function func() {
        var oDiv = document.querySelectorAll(".test");
        oDiv[0].style.color = "red";
    }
    func()
</script>
</html>

也可以使用quesrySelector()精确地获取某个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul >
        <li>javascript</li>
        <li>javascript</li>
        <li>javascript</li>
        <li>javascript</li>
        <li>javascript</li>
    </ul>
</body>
<script>
    function func() {
        var oLi = document.querySelector("#list li:nth-child(3)");
        oLi.style.color = "red";
    }
    func()
</script>
</html>
5.getElementsByName()

通过name属性来获取表单元素。一般也只用表单元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label><input type="radio" name="status" value="本科"/>本科</label>
    <label><input type="radio" name="status" value="硕士"/>硕士</label>
    <label><input type="radio" name="status" value="博士"/>博士</label>
</body>
<script>
    function func() {
        var oInput = document.getElementsByName("status");
        oInput[2].checked = true;
    }
    func()
</script>
</html>
6.document.title和document.body

获取一个页面仅有的一个title和body元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    function func() {
        document.title = "这是title元素";
        document.body.innerHTML = "<p style='color: red'>这是body元素</p>";
    }
    func()
</script>
</html>

最后，注意getElementByTagName可以操作动态创建的Dom，而getElsmentById不可以。关于创建元素，则需要另外了解了。

相关推荐