JS学习（10）----DOM-CSDN博客

本文链接：https://blog.csdn.net/lichen_yun/article/details/75810250

1.DOM是什么

DOM: Document Object Model
这里写图片描述

2.DOM 方法

如前面经常使用的getElementById(“idName”);

document.getElementById("test").innerHTML = "Hello";

其中的getElementById是HTML DOM的方法，而innerHTML是HTML DOM的属性。
注：innerHTML可以改变任意html元素的内容，包括html和body。

3.Document

（1）寻找DOM元素的方法

有以下几种方法，分别是getElementById、getElementsByClassName、getElementsByTagName、getElementsByName
注：这几种方法中第一个是element，而后面的几种的element用的都是复数。
(A)getElementById
因为每一个元素的id都是唯一的，所以element是唯一的

document.getElementById("test")

(B)getElementsByName
顾名思义，这个方法时通过name属性来获取HTML DOM中对应的元素，因为不同的元素名字可以相同，所以elements用的是复数

<div name="docName" id="id1"></div>
<div name="docName" id="id2"></div>
document.getElementsByName("docName");

可以通过document.getElementByName(“docName”)[0]或者是document.getElementByName(“docName”)[1]来单独访问一个元素。
(C)getElementsByClassName(className)
通过class的名字来获取元素。

document.getElementsByClassName("className");

(D)getElementsByTagName(TagName)

document.getElementsByTagName("p");

(E)querySelectorAll();

var x = document.querySelectorAll("p.test");
var str = x[0].innerHTML + x[1].innerHTML;

(F)通过获取对象来得到元素element

//  注:此代码来自：https://www.w3schools.com
<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.forms["frm1"];
    var text = "";
    var i;
    for (i = 0; i < x.length ;i++) {
    // 获取到的三个元素分别对应三个input
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

（2）改变元素的内容

这里写图片描述
可以改变元素对应属性的值，如下栗子：

<img id="image" src="test.jpg">

document.getElementById("image").src = "bird.jpg";

（3）DOM添加和删除节点

这里写图片描述
（A）createElement
常常与appendChild一起使用，因为添加之后需要将节点加到html中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <p>点击按钮创建新的button元素</p>
    <button id="clickBtn">Click Me</button>
    <script src="script.js"></script>
</body>
</html>

/* 
* @Author: Lin
* @Date:   2017-07-23 12:00:09
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-23 12:03:25
*/
document.getElementById("clickBtn").onclick = function() {
    var newBtn = document.createElement("input");
    newBtn.type = "button";
    newBtn.value = "newButton";
    document.body.appendChild(newBtn);
};

每次点击button，就会增加新的button。
（B）removeChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <ul id="mlist">
        <li>Apple</li>
        <li>Pear</li>
        <li>Watermelon</li>
    </ul
    <button id="btn" onclick="myFunction()">Click Me</button>
    <p id="test"></p>
    <script src="script.js"></script>
</body>
</html>

function myFunction() {
    var myList = document.getElementById("mlist");
    myList.removeChild(myList.childNodes[0]);
}

注：有个问题还没有搞懂，上面的这个代码执行后需要点击两次button显示界面中才会减少一个li，但是下面的这份代码却不一样，只需要点击一次就能够减少一个li。希望也欢迎理解其中不同的朋友给我留言。

<!DOCTYPE html>
<html>
<body>
  <ul id="myList">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    <p id="demo">点击按钮来删除列表中的首个项目。</p>
    <button onclick="myFunction()">试一下</button>

    <script>
        function myFunction()
        {
            var list=document.getElementById("myList");
            list.removeChild(list.childNodes[0]);
        }
    </script>
</body>
</html>

（4）添加事件处理器

document.getElementById("btn").onclick = myFunction() {
......
};

通过在js中添加事件处理器而不是直接在html中对事件进行处理，可以有效地将html、css和js分离开来，增强代码的可读性。