DOM

DOM（文档对象模型）是针对HTML和XML文档的API，描绘了一个层次化的节点树

1. 节点层次
   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//布尔值，用来区分属性在代码中是指定的还是默认的

2. 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文档时实时运行查询