JavaScript(五)---【DOM】

零.前言

JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客

JavaScript(二)---【js数组、js对象、this指针】-CSDN博客

JavaScript(三)---【this指针，函数定义、Call、Apply、函数绑定、闭包】-CSDN博客

JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】-CSDN博客

一.DOM简介

1.1什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM（Document Object Model）

每个HTML都可以被视为一个文档树，DOM为这个文档树提供了一个编程接口，开发者可以使用JS来操作这个树。

1.2文档树能干什么

文档树可以干的事情非常多，基本上所有可以想到的功能，都可以利用JS+文档树来实现。

JS能够改变页面中的所有HTML元素
JS能够改变页面中的所有HTML属性
JS能够改变页面中的所有CSS样式
JS能在页面中创建新的HTML事件

二.DOM方法

2.1概括

在DOM中，所有的HTML都被定义为：“对象”，故下文中的所有“对象”都指的是“HTML元素”

另外，在DOM中还有：“方法”、“属性·”两个概念。

“方法”：“指能够在HTML上执行的动作”

“属性”：“能够设置或改变HTML元素的内容(值)”

例如：

    <h1 id="demo"></h1>
    <script>
        document.getElementById("demo").innerHTML = "这是一个例子."
    </script>

效果：

其中，“getEelmentById”是一个“方法”，而“innerHTML”是一个“属性”

这段代码的作用就是修改<p>标签的内容

2.2常见的DOM方法【查找】

以下是四种通过不同“关键字”来查找HTML元素的方法

document.getElementById(id)：通过元素id来查找
document.getElementByTagName(name)：通过标签名来查找
document.getElementByClassName(name)：通过类名来查找
document.querySelectorAll(id、类名、类型、属性、属性值等等)：通过“CSS选择器” 来查找

值得注意的是：“上述的id和name都必须用双引号包裹”

2.3常见的DOM方法【改变HTML元素】

以下是四种改变HTML元素属性的方法：

elements.innerHTML = 新内容：改变元素的内容
elements.attribute = 新属性值：改变元素的属性值(这里的attribute是具体的属性名)
elements.setAttribute(属性名,新属性值)：改变元素的属性值
elements.style.property = 新样式：改变元素的CSS样式

例如，我想要修改<input>输入框的文本类型由“text”变为“password”，可以如下使用：

    <input type="password" id="demo">
    <script>
        document.getElementById("demo").type = "password"
    </script>

2.4常见的DOM方法【添加和删除元素】

以下是五种添加、删除HTML元素的方法：

document.createElement(element)：创建HTML元素
document.removeChild(element)：删除HTML元素
document.appendChild(element)：添加HTML元素
document.replaceChild(element)：替换HTML元素
document.write(text)：写入HTML输出流

2.5常见的DOM问题

1.NodeList与HTMLCollection

“HTMLCollection”是HTML元素的集合(数组)，而NodeList是“文档节点”集合的一个对象。

这两者几乎相同，但是本质上不同

HTMLColeection是一个数组，可以使用数组的方法来对它修改，如“pop()、join()”方法等

但是NodeList是一个文档节点总和的对象，这个对象无法使用数组的方法

同时NodeList只能使用下标来访问内部元素，而HTMLCollection可以使用“下标索引、元素名、id”

我们用一个例子来说明两者区别：

<body>
    <h1 class="sample">Hello World</h1>
    <h1 class="sample">这是一个例子</h1>
    <h1 class="sample">这是一个例子</h1>
    <p id="sample"></p>
    <script>
        var list = [1,2,3,4,5,6]
        var x = document.querySelectorAll("h1.sample");
        console.log(list);
        console.log(x);
    </script>
</body>

效果：

注意到两者的“Prototype”类型，一个是“Array”数组，另一个是“NodeList” 对象

2.使用“类名”、“标签名”查询返回的是一个“数组”

在使用“类名”、“标签名”来查询元素时，返回的是一个包含“所有符合条件”的元素的“NodeLsit”。
例如我们使用“标签名”查询

<body>
    <h1>我是第一个h1标签</h1>
    <h1>我是第二个h1标签</h1>
    <h1>我是第三个h1标签</h1>
    <h1>我是第四个h1标签</h1>
    <h1>我是第五个h1标签</h1>
    <script>
        var x = document.getElementsByTagName("h1");
        console.log(x);
    </script>
</body>

效果：

3.使用document.createElement()创建节点时

对于任何一个元素，它由两部分组成：“元素节点”和“文本节点”

“元素节点”：“代表这个元素”

“文本节点”：“元素内的内容”

我们可以使用“document.createTextNode”来创建一个文本节点，再把这个节点添加到我们的元素节点中即可

<body>
    <h1>我是第一个h1标签</h1>
    <h1>我是第二个h1标签</h1>
    <h1>我是第三个h1标签</h1>
    <h1>我是第四个h1标签</h1>
    <h1>我是第五个h1标签</h1>
    <script>
        var body = document.getElementsByTagName("body")[0]
        var x = document.createElement("p");
        var node = document.createTextNode("这是一个由JS生成的p标签");
        x.appendChild(node);
        body.appendChild(x);
    </script>
</body>

效果：

4.使用CSS选择器查找标签时

使用CSS选择器查找符合条件的标签时，返回的是一个“所有符合条件”的"NodeList"。

例如：

<body>
    <h1 class="sample">Hello World</h1>
    <h1 class="sample">这是一个例子</h1>
    <h1 class="sample">这是一个例子</h1>
    <p id="sample"></p>
    <script>
        var x = document.querySelectorAll("h1.sample");
        console.log(x);
    </script>
<body>

结果：

通过NodeList，我们可以实现一些功能：

<body>
    <h1 class="sample">Hello World</h1>
    <h1 class="sample">这是一个例子</h1>
    <h1 class="sample">这是一个例子</h1>
    <p id="sample"></p>
    <script>
        var x = document.querySelectorAll("h1.sample");
        console.log(x);
    </script>
    <script>
        var text = "";
        for(let i = 0;i < x.length;i++){
            text += x[i].innerHTML + "<br>";
        }
        document.getElementById("sample").innerHTML = text;
    </script>
</body>

效果：