Javascript基础教程(三十二)

1.DOM获取元素节点的常用六个方法

方法	说明
getElementById	根据ID获取第一个ID对应的元素对象。返回单个节点对象
getElementsByTagName	根据标签名字获取节点集合，结果是一个元素集合（类数组集合）
getElementsByName	根据元素的NAME属性值获取一组元素，因为表单元素常用name属性，所以这个方法一般都是用来操作表单元素的。
getElementsByClassName	根据class的名字获取节点的集合，结果是一个元素集合（类数组集合）
querySelector	返回文档中匹配指定 CSS 选择器的一个元素
querySelectorAll	返回文档中匹配指定 CSS 选择器的元素集合

注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

2.实例

1)getElementById

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>DOM测试</h1>
<ul type="square">
    <li id="mylove" class="server">Java</li>
    <li class="web">HTML</li>
    <li class="web">Css</li>
    <li class="web">Javascript</li>
    <li class="server">C++</li>
</ul>
<script>
    let node = document.getElementById("mylove");
    console.log(node.innerText);
</script>
</body>
</html>

运行结果：
Java

2)getElementsByTagName

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>DOM测试</h1>
<ul type="square">
    <li id="mylove" class="server">Java</li>
    <li class="web">HTML</li>
    <li class="web">Css</li>
    <li class="web">Javascript</li>
    <li class="server">C++</li>
</ul>
<script>
    let nodes = document.getElementsByTagName("li");
    for(let n of nodes){
        console.log(n.innerText);
    }
</script>
</body>
</html>

运行结果：
Java
HTML
Css
Javascript
C++

3)getElementsByName

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>DOM测试</h1>
<form>
    <input type="checkbox" name="favorites" value="read">read</input>
    <input type="checkbox" name="favorites" value="music">music</input>
    <input type="checkbox" name="favorites" value="movie">movie</input>
    <input type="checkbox" name="favorites" value="game">game</input>
</form>

<script>
    let nodes = document.getElementsByName("favorites");
    for(let n of nodes){
        console.log(n.value);
    }
</script>
</body>
</html>

运行结果：
read
music
movie
game

4)getElementsByClassName

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>DOM测试</h1>
<ul type="square">
    <li id="mylove" class="server">Java</li>
    <li class="web">HTML</li>
    <li class="web">Css</li>
    <li class="web">Javascript</li>
    <li class="server">C++</li>
</ul>
<script>
    let nodes = document.getElementsByClassName("web");

    for(let n of nodes){
        console.log(n.innerText);
    }
</script>
</body>
</html>

运行结果：
HTML
Css
Javascript

5)querySelector

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li class="fruit">apple</li>
    <li class="fruit">banana</li>
    <li class="vg">tomato</li>
    <li class="fruit">watermelon</li>
    <li class="vg">onion</li>
    <li id="mylove">grape</li>
</ul>

<script>

    console.log(document.querySelector(".fruit").innerText);
    console.log(document.querySelector("#mylove").innerText);
    document.querySelectorAll(".vg").forEach(function(n,i){
        console.log(n.innerText);
    })
</script>
</body>
</html>

运行结果：
apple
grape
tomato
onion

3.获取元素内容

方法	说明
innerText	获得纯文本，是没有标签的效果的
innerHTML	获得html标签内容，是有标签效果的

例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>DOM测试</h1>
<div id="box">
    <span><em>SPAN1</em></span>
</div>

<script>
    let node = document.getElementById("box");
    console.log(node.innerText);
    console.log(node.innerHTML);
</script>
</body>
</html>

运行结果：
SPAN1
    <span><em>SPAN1</em></span>