JavaScript DOM操作

DOM操作基础

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：文档对象模型(Document object Model)，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

• BOM：浏览器对象模型(Browser Object Model)，操作浏览器部分功能的API。比如让浏览器自动滚动。

节点

节点(Node)：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：

• 文档节点(文档)：整个 HTML 文档。整个 HTML 文档就是一个文档节点。

• 元素节点(标签)：HTML标签。

• 属性节点(属性)：元素的属性。

• 文本节点(文本)：HTML标签中的文本内容(包括标签之间的空格、换行)。

节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。

什么是DOM

DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

获取元素

getElementById()

在JavaScript中，如果想通过id来选中元素，我们可以使用getElementById()方法来实现。

getElementById()类似于CSS中的id选择器，只不过getElementById()是JavaScript的操作方式，而id选择器是CSS的操作方式。

语法规则
document.getElementById('id名称');

getElementsByTagName()

在JavaScript中，如果想通过标签名来选中元素，我们可以使用getElementsByTagName()方法来实现。getElementsByTagName，也就是“get elements by tag name”，意思是通过标签名来获取元素。

同样地，getElementsByTagName()类似于CSS中的“元素选择器”。

语法规则
document.getElementByTagName('标签名');

getElementsByTagName()方法中的“elements”是一个复数，写的时候别漏掉“s”。这是因为getElementsByTagName()获取的是多个元素(即集合)，而getElementById()获取的仅仅是一个元素。

两者之间的区别

• getElementById()获取的是1个元素，而getElementsByTagName()获取的是多个元素(伪数组)。
• getElementById()前面只可以接document，也就是document.getElementById()。getElementsByTagName()前面不仅可以接document，还可以接其他DOM对象。
• getElementById()不可以操作动态创建的DOM元素，而getElementsByTagName()可以操作动态创建的DOM元素。

getElementsByClassName()

在JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现。getElementsByClassName，也就是“get elements by class name”，意思是（通过类名来获取元素。

同样地，getElementsByClassName()类似于CSS中的class选择器。

语法规则
document.getElementByClassName('Class名');

getElementsByClassName()方法中的“elements”是一个复数，写的时候别漏掉“s”。和getElementsByTagName相似，getElementsByClassName()获取的也是一个类数组。

getElementsByClassName()获取的也是一个“类数组”。如果我们想得到某一个元素，也可以使用数组下标的方式来获取，这一点和getElementsByTagName()很相似。

此外，getElementsByClassName()不能操作动态DOM。实际上，对于getElementById()、getElementsByClassName()和getElementsByTagName()这3个方法来说，只有getElementsByTagName()这一个方法能够操作动态DOM。

querySelector()和querySelectorAll()

语法规则
document.querySelector('选择器');
document.querySelectorAll('选择器');

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。这两个方法都非常简单，它们的写法和CSS选择器的写法是完全一样的。

document.querySelectorAll()由于获取的是多个元素，因此这也是一个类数组。想要精确得到某一个元素，也需要通过使用数组下标的方式来获取。

getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。

语法规则
document.getElementByName('Name名');

getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标的方式来获取。

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门提供了两个非常方便的方法：document.title和document.body。

创建元素

在JavaScript中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。

这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素。这个元素一开始在HTML中是不存在的。

A．appendChild（B）表示把B插入到A的内部，也就是使B成为A的子节点。

想要创建一个元素，需要以下4步。

• ① 创建元素节点：createElement()。
• ② 创建文本节点：createTextNode()。
• ③ 把文本节点插入元素节点：appendChild()。
• ④ 把组装好的元素插入到已有元素中：appendChild()。

插入元素

在JavaScript中，插入元素有以下两种方法

• appendChild()
• insertBefore()

appendChild()

在JavaScript中，我们可以使用appendChild()把一个新元素插入到父元素的内部子元素的“末尾”。

语法规则
A.appendChild(B);

A表示父元素，B表示动态创建好的新元素。

insertBefore()

在JavaScript中，我们可以使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”。

语法规则
A.insertBefore(B,ref);

A表示父元素，B表示新子元素。ref表示指定子元素，A.insertBefore(B,ref)则表示在ref之前插入B。

需要注意一点，appendChild()和insertBefore()这两种插入元素的方法都需要先获取父元素才可以操作。

删除元素

在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素。

语法规则
A.removeChild(B);

A表示父元素，B表示父元素内部的某个子元素。

复制元素

在JavaScript中，我们可以使用cloneNode()方法来实现复制元素。

语法规则
obj.cloneNode(bool);

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。

• 1或true：表示复制元素本身以及复制该元素下的所有子元素。
• 0或false：表示仅仅复制元素本身，不复制该元素下的子元素。

替换元素

在JavaScript中，我们可以使用replaceChild()方法来实现替换元素。

语法规则
A.replaceChild(new, old);

A表示父元素，new表示新子元素，old表示旧子元素。

DOM进阶

HTML属性操作（对象属性）

HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。如input元素，HTML属性操作指的就是操作它的id、type、value等，其他元素也类似。

操作HTML元素的属性，JavaScript为我们提供了4种方法。

• getAttribute(): 获取元素某个属性的值。
• setAttribute(): 设置元素某个属性的值。
• removeAttribute(): 删除元素的某个属性。
• hasAttribute(): 判断元素是否含有某个属性。

CSS属性操作

CSS属性操作，指的是使用JavaScript来操作一个元素的CSS样式。

在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值。

需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。何为“骆驼峰型”？如font-size应该写成fontSize,border-bottom-width应该写成borderBottomWidth（看起来像骆驼峰）

在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。

• style对象
• cssText属性

DOM遍历

DOM遍历，可以简单地理解为“查找元素”
对于DOM遍历，可以分为以下3种情况。

• 查找父元素: 使用parentNode属性来获得某个元素的父元素
• 查找子元素: 我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素
  • childNodes、firstChild、lastChild：获取的是所有的子节点。这个子节点是包括元素节点以及文本节点的
  • children、firstElementChild、lastElementChild：获取的是所有的元素节点，不包括文本节点
• 查找兄弟元素：可以使用以下2组方式来获得兄弟元素
  • previousSibling、nextSibling
  • previousElementSibling、nextElementSibling

跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果只操作元素节点，建议使用previousElementSibling和nextElementSibling。

innerHTML和innerText

在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。

document.write()与innerHtml()的区别在于一个需要全部重载，另一个不需要，可以定向修改。