DOM
1.HTML/XHTML/DHTML的区别和关系？
HTML:<br> <li>abcd <h2 style=color:red>abcd
XHTML: <br/> <li style="">abcd</li>
DHTML: Dynamic HTML，动态超文本标记语言，网页的内容(HTML)和表现(CSS)可以与用户之间发生交互，产生一些动态的可变化的效果。不是一门新技术。使用DHTML把浏览器窗口、网页内容都看做对象。使用DHTML提供的这些对象可以操作浏览器、网页内容。
HTML CSS ES1
内容 + 表现 + 行为 = DHTML
DHTML对象分为两大类：
(1)BOM对象：Browser Object Model，包括七个对象，用于操作浏览器本身，没有相关行业标准，但大部分浏览器厂家都提供了对这七个对象的支持。
(2)DOM对象：Document Object Model，包括N个对象，每个对象对应于一个HTML标签，用于操作网页内容，W3C制定了DOM对象的标准。
2.DOM对象
W3C DOM对象分为三部分：
(1)核心DOM对象：用于操作任意的ML文档
(2)HTML DOM对象：专用于操作HTML文档
(3)XML DOM对象：专用于XML文档
<company>
<dept dname="研发部">
<emp eno="1001">
<ename>Tom</ename>
</emp>
<emp eno="1002">
<ename>Mary</ename>
</emp>
</dept>
</company>
DOM模型把一篇ML文档中的所有内容都看做一个节点对象(Node)，节点对象又可以细分为：
(1)文档节点 —— document node
(2)元素节点 —— element node
(3)属性节点 —— attribute node
(4)文本节点 —— text node
(5)注释节点 —— comment node
一篇文档中的所有DOM对象组成一种“树形结构”，树的根是document对象，其它的节点对象都可以通过节点间的关系来查找：
(1)父子关系：
node.parentNode 有0/1个父节点
node.childNodes 有0~n个子节点，组成一个类数组对象
node.firstChild 一个节点的第一个孩子(0/1个)
node.lastChild 一个节点的最后一个孩子(0/1个)
(2)兄弟关系：
node.nextSibling 一个节点的下一个兄弟节点(0/1个)
node.previousSibling 一个节点的上一个兄弟节点(0/1个)
除了上述属性外，每个节点还有三个必备的属性：
node.nodeName node.nodeType node.nodeValue
document #document 9 null
DOCTYPE html 10 null
元素节点 标签名(大写) 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容
注释节点 #comment 8 注释内容
|
DOM: 是一组对象及成员属性和方法，可用于“增删改查”文档中的内容 |
3.查找元素节点的简便方法——getElementById
用法： document.getElementById( '元素的id' )
注意：与CSS选择器不同，此方法只能返回找到的第一个具有指定id的元素，剩余的不再查找——即方法的返回值要么是null要么是一个特定的元素。
4.查找元素节点的简便方法——getElementsByTagName
用法： document.getElementsByTagName('标签名')
element.getElementsByTagName( '标签名' )
注意：(1)此方法的返回值是一个类数组对象
5.查找元素节点的简便方法——getElementsByName
用法： document.getElementsByName('name属性的值')
说明： 此方法一般用于查找表单中的元素——只有表单中的元素才有name属性。返回值也是类数组对象，因为多个input的name属性值相同：
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女">
6.查找元素节点的简便方法——getElementsByClassName
用法： document.getElementsByClassName('class属性的值')
element.getElementsByClassName('class属性的值')
说明：此方法的返回值是一个类数组对象。老IE不支持此方法！！
7.(重点)查找元素节点的简便方法——使用CSS选择器来查找元素
用法： element.querySelector( 'CSS选择器' ); //返回一个对象
element.querySelectorAll( 'CSS选择器' ); //返回一个类数组对象
|
补充小知识点： a标签的href属性是必需的！ href="" 含义：刷新当前页面 href="#" 含义：跳转到当前页面的起始点 href="#ch1" 含义：跳转到指定的锚点 href="2" 含义：跳转到页面URL为2的页面 href="javascript: void(0)" 含义：不做任何的页面跳转 href="javascript: void(f1())" 含义：调用f1()函数且不做任何页面跳转
|
(1)遍历DOM树
(2)getElementById
(3)getElementByTagName
(4)getElementByName
(5)getElementByClassName
(6)querySelector——老IE不支持
1.选取DOM树上的元素节点的其它方法
(1)document.all 返回文档中所有的节点组成的集合
(2)document.documentElement 返回<html>节点对象
(3)document.head 返回<head>节点对象
(4)document.body 返回<body>节点对象
2.获取/设置元素节点的内容
<h1>一号标题</h1>
(1) h1.firstChild.nodeValue
(2) h1.innerHTML 读取/设置元素中的内容(可以包含子标签)
(3) h1.textContent 读取/设置元素中的文本内容(不包含子标签) —— 符合DOM标准
(4) h1.innerText 读取/设置元素中的文本内容(不包含子标签) —— 老IE的写法
3.读取/设置元素节点的属性
(1)element.attributes 返回一个类数组对象，包含当前元素对象的所有属性节点，如：
div.attributes[2].nodeValue
(2)element.getAttributeNode('属性名') 返回一个属性节点对象，可以使用nodeName、nodeValue访问该对象
(3)element.getAttribute('属性名') 返回一个string，内容即为指定属性的值
(4)element.setAttribute('属性名', '属性值') 修改元素的属性
(5)element.removeAttribute('属性名') 删除指定的属性
(6)element.hasAttribute('属性名') 判定元素是否声明了指定的属性
4.DOM树： 节点树和元素树
节点树： 元素节点、文本节点、属性节点、注释节点...
元素树： 元素节点
一篇文档，既可以看做是一颗节点树，也可以看做时一颗元素树——元素树是节点树的子集，操作起来要比节点树方便。
|
节点树 |
元素树 |
|
根对象：document |
根对象：document |
|
childNodes |
children |
|
firstChild |
firstElementChild |
|
lastChild |
lastElementChild |
|
parentNode |
parentElementNode |
|
nextSibling |
nextElementSibling |
|
previousSibling |
previousElementSibling |
提示：元素树相关属性老IE不支持。
<ul>
<li>ABC</li>
<li>XYZ</li>
</ul>
5.在DOM树上添加新的节点
添加新DOM节点对象，需要两步：
(1)创建出新的节点对象
var e = document.createElement('标签名')
var t = document.createTextNode('文本内容')
var c = document.createComment('注释内容')
var a = document.createAttributeNode('属性名')
(2)把新建的节点对象挂到DOM树上
parent.appendChild( newChild ) //把新建的节点追加为父节点的最后一个孩子节点
parent.insertBefore( newChild, existingChild ) //把新建的节点添加到已经存在的子节点之前
