DOM ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第5天
DOM是一种树形结构的数据结构
节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构
Node类型
nodeName和nodeValue属性
这两个属性的值完全取决于节点的类型
节点关系
文档中所有的节点之间都存在这样或那样的关系
每个节点都有一个childNodes属性，其中保存着一个NodeList对象
每个节点都有一个parentNode属性，该属性指向文档树中的父节点
previousSibling和nextSibling属性，可以访问同一列表中的其他节点
父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点
haschildNodes()，在节点包含一或多个子节点的情况下返回true
操作节点
appendChild()，用于向childNodes列表的末尾添加一个节点
insertBefore()方法，接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回
replaceChild()，接受两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置
removeChild()，这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值
其他方法
cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本
normalize()，这个方法唯一的作用就是处理文档树中的文本节点
Document类型
文档的子节点
documentElement属性，该属性始终指向HTML页面中的<html>元素
body属性，直接指向<body>元素
DocumentType,指向<!DOCTYPE>
文档信息
title包含着<title>元素中的文本
URL属性中包含页面完整的URL
domain属性中只包含页面的域名
referrer属性中则保存着链接到当前页面的那个页面的URL
查找元素
getElementById()，接收一个参数：要取得的元素的ID
getElementByTagName()，这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的NodeList
DOM一致性检测
hasFeature()，这个方法接受两个参数：要检测的DOM功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回true
文档写入
write() writeln() open() close()
Element类型
HTML元素
所有HTML元素都由HTMLElement类型表示
取得特性
getAttribute()
setAttribute() 这个方法接受两个参数：要设置的特性名和值
removeAttribute() 这个方法用于彻底删除元素的特性
创建元素
document.createElement()
Text类型
文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容 document.createTextNode()创建新闻本节点，这个方法接受一个参数——要插入节点中的文本
Comment类型
注释在DOM中是通过Comment类型来表示的
DOM操作技术
动态脚本
创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript代码
动态样式
动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中
