javascript学习14：使用DOM元素

1、使用元素对象

HTMLElement对象提供了一组属性，你可以用它们来读取和修改被代表元素的数据。

1.1 使用类

你可以用两种方式处理某个元素所属的类。第一种方式是使用className属性，它会返回一个类的列表。通过改变这个字符串的值，你就能添加或移除类。

DOMTokenList的成员：

成员	说明	返回
add(class)	给元素添加指定的类	void
contains(class)	如果元素属于指定的类就返回true	布尔值
length	返回元素所属类的数量	数值
remove(class)	从元素上移除指定的类	void
toggle(class)	如果类不存在就添加它，如果存在就移除它	布尔值

1.2 使用元素属性

HTMLElement对象既有一些属性来对应最重要的HTML全局属性,又支持对单个元素的任意属性进行读取和设置。

1）使用以data-开头的属性

在DOM里可以通过dataset属性来操作这些自定义属性，它会返回一个包含值的数组，其索引根据的是名称的自定义部分。

2）使用所有属性

可以通过attributes属性获得一个包含某元素所有属性的集合，它会返回一个由Attr对象构成的数组。

2、使用Text对象

元素的文本内容是由Text对象代表的，它在文档模型里表现为元素的子对象。

<p>
    hahadfadsfadsfasdfa<b>fdadfasd</b>dsfasdf
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXIO5TM6-1613219403780)(D:\u(backups)]\note\javascript\img\14-1.JPG)

Text对象的成员：

成员	说明	返回
appendData(string)	把指定字符串附加到文本块末尾
data	获取或设置文本
deleteData(offset,string)	从文本中移除字符串。第一个数字是偏移量,第二个是要移除的字符数量
insertData(offset,string)	在指定偏移量处插入指定字符串
length	返回字符的数量
replaceData(offset,count,string)	用指定字符串替换一段文本
replaceWholeText(string)	替换全部文本
splitText(number)	将现有的Text元素在指定偏移量处一分为二
substringData(offset,count)	返回文本的子串
wholeText	获取文本

3、修改模型

dom操作成员：

成员	说明	返回
appendChild(HTMLElement)	将指定元素添加为当前元素的子元素
cloneNode(boolean)	复制一个元素
compareDocumentPosition(HTMLElement)	判断一个元素的相对位置
innerHTML	获取或设置元素的内容
insertAdjacentHTML(pos,text)	相对于元素插入HTML
insertBefore(newElem,childElem)	在第二个(子）元素之前插入第一个元素
isEqualNode(HTMLElement)	判断指定元素是否与当前元素相同
isSameNode(HTMLElement)	判断指定元素是否就是当前元素
outerHTML	获取或设置某个元素的HTML和内容
removeChild(HTMLElement)	从当前元素上移除指定的子元素
replaceChild(HTMLElement,HTMLElement)	替换当前元素的某个子元素

创建方法：

成员	说明
createElement(tag)	创建一个属于指定标签类型的新HTMLElement对象
createTextNode(text)	创建一个带有指定内容的新Text对象

3.1 创建和删除元素

你需要通过document对象创建新的元素，然后找到一个现存的HTNLElement，并使用之前介绍的某种方法来插入它们。

3.2 复制元素

可以使用cloneNode方法来复制现有的元素。这个方法有时候很方便，因为它允许你不必从头开始创建想要的元素。

3.3 移动元素

要把元素从文档的一处移到另一处，需要做的仅仅是把待移动的元素关联到新的父元素上，而不需要让该元素脱离它的初始位置。

3.4 比较元素对象

可以通过两种方式来比较元素对象。第一种方式是简单地检查它们是否代表了同一个元素，用isSameNode方法可以做到这一点。这让你能够比较从不同查询中获得的对象。

3.5 使用HTML片段

innerHTML属性，outerHTML属性和insertAdjacentHTML方法都是便利的语法捷径,它们让你能够使用HTML片段,从而不再需要创建元素和文本对象的详细层级结构。

3.6 向文本块插入元素

修改模型的另一种重要方式是向由Text对象代表的文本块添加元素。