JS之文档对象模型DOM
JS之文档对象模型DOM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>History和Location使用</title>
</head>
<body>
<input type="button" value="返回" onclick="history.back();" />
</body>
</html>
DOM 解析模型，将文档加载到 内存，形成一个树形结构 <html> 就是根节点，每个标签会成为一个元素节点、标签的属性成为属性节点，标签内部的文本内容成为文本节点
注意：属性节点，它不属于DOM树形结构，不属于任何节点父节点，也不属于任何节点的子节点 ，属性节点依附于元素节点上 一种附加节点
【上面代码 产生6个元素节点，5个属性节点，9个文本节点】
HTML 本身也是 XML，所有可以使用XML DOM API规范
DOM Element
DOM Attr
DOM Text
DOM Document
HTML DOM是对XML DOM的扩展， HTML DOM比XML DOM 开发JS来说更加简单方便！
HTML DOM最优秀的地方是，操作form对象和table数据
1.BOM和HTML DOM关系图
学习DOM 编程，从Document对象开始，document代表当前HTML网页文档对象，是window对象一个属性，可以直接使用 ，所有HTML DOM对象都是Document子对象
2.DOM编程开发
window.document 代表整个HTML文档
①：通过document获得Node节点对象
document.forms 获得页面中所有form元素集合
document.body 访问页面中<body> 元素
document.cookie 用JS操作网页cookie信息
全局检索提供了三个重要的方法：
document.getElementById():通过id属性检索，获得Node节点（Element元素）
document.getElementsByName 通过name 属性检索 ，获得NodeList
document.getElementsByTagName 通过标签元素名称 获得NodeList
其中NodeList可以作为数组进行操作
Demo:在每一个h1标签后追加itcast
<script type="text/javascript">
//在每一个h1标签内追加一个itcast
window.onload = function(){
varnodeList = document.getElementsByTagName("h1");
for(vari=0; i<nodeList.length;i++){
// varh1 = nodeList[i];
varh1 = nodeList.item(i);
alert(h1.innerHTML);
h1.innerHTML += "itcast";
}
}
</script>
<body>
<h1>AAA</h1>
<h1>BBB</h1>
<h1>CCC</h1>
<h1>DDD</h1>
</body>
②：获得node后
如果node是元素，去操作里面的文本内容 innerHTML (HTML页面内所有元素，一定是HTML 元素，innerHTML 是所有HTML元素通用属性 )
XML 取得一个元素内部文本内容 element.firstChild.nodeValue(看批注32)
③：通过节点Node相对位置关系访问元素
childNodes
firstChild
lastChild
nextSibling
parentNode
previousSibling
用2种方式打印——明天休息
<h1id="h1">明天休息</h1><br>
varh1 = document.getElementById("h1");
alert(h1.innerHTML);//方式一
alert(h1.firstChild.nodeValue);//方式二
3.DOM元素常见操作
DOM 获取节点：节点查询 参上
DOM 改变节点：元素属性修改setAttribute(name,value)
内部文本元素的修改 innerHTML
DOM 删除节点：removeChild 删除子元素 、removeAttribute(name)删除节点指定属性
* 要删除节点o o.parentNode.removeChild(o)
DOM 替换节点：replaceChild：父节点.replaceChild(新节点,被替换节点) ;
如果对于一个已经存在节点，执行 appendChild、 replaceChild都会造成该节点一个移动效果，可以采取先克隆再复制来消除此效果。
DOM 创建节点：document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点
DOM 添加节点 appendChild 父元素.appendChild(新的子节点) ;
insertBefore 父节点.insertBefore(新子节点, 已经存在子节点)
DOM 克隆节点 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点， 克隆节点包含原节点的属性和子元素
此节内容有大量的练习，建议大家做写，增强代码的熟练度。