DOM（文档对象模型）是针对HTML和XML文档的API，描绘了一个层次化的节点树
- 节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构
- Node类型
js中所有节点类型都继承自Node类型
a.nodeType属性 表明节点类型,nodeName、nodeValue
b.节点关系 childNodes属性 parentNode属性 previousSibling属性 nextSibling属性 firstChild属性 lastChild属性
c.操作节点 appendChild insertBefore replaceChild removeChild
d.其他方法 cloneNode,创建调用这个方法的节点的一个完全相同的副本,cloneNode(true)表示深复制，会将子节点也复制下来
- Document类型
Document类型表示文档
文档标题------ title
页面完整url------ URL
页面域名 -------domain
链接到当前页面的页面url -------referrer
查找元素
getElementById()
getElementsByTagName()
文档写入
write()//在页面呈现过程中直接向其中输出了内容,在文档加载结束后再调用，输出的内容会重写整个页面
writeIn()
open()//打开网页输出流
close()//关闭网页输出流
- Element类型
用于表现XML和HTML元素，提供了对元素标签名、子节点及特性的访问
tagName/nodeName 访问元素的标签名
1) html元素
id，title,className属性
2)取得特性
getAttribute() //参数为要获取的属性名
3)设置特性
setAttribute()//参数为要设置的属性名和值
4)删除特性
removeAttribute()
5)attributes属性
可遍历元素属性
6)创建元素
createElement()创建新元素，需要配合使用appendChild()，inser- tBefore() ，replaceChild() 方法将新元素添加至文档树
- Text类型
开始与结束标签之间只要存在内容，就会创建一个文本节点
1.创建文本节点
createTextNode()//创建新文本节点，参数为要插入节点中的文本
2.规范化文本节点
normalize()//如果在一个包含两个或多个文本节点的父元素上调用no'r'ma'li'ze（）方法，会将所有文本节点合并成一个文本节点
3.分割文本节点
splitText()//按照指定位置分割nodeValue的值，将一个文本节点分成两个文本节点
- Comment类型
注释在Dom中用Comment类型表示 - CDATASection类型
只针对基于XML类型的文档 - DocumentType类型
包含与doctype有关的信息 - Attr类型
元素的特性在Dom中用Attr类型表示
name//属性名称
value//属性值
specified//布尔值，用来区分属性在代码中是指定的还是默认的
- Dom操作技术
- 动态脚本
通过src引入外部文件
<script type="text/javascript" src="client.js"></script>
直接插入
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
- 动态样式
外部引入样式
<link rel="stylesheet" type="text/css" href="styles.css">
嵌入样式
<style type="text/css">
body {
background-color: red;
}
</style>
- 操作表格
- 使用NodeList
每当文档结构发生变化，NodeList就会更新，所有NodeList对象都是在访问Dom文档时实时运行查询
