DOM 节点树
document--根节点html(dom节点、dom对象、Element)
---子节点1 head
----子节点2 body
Document Object Model 文档对象模型
1.DOM是HTML与XML的应用编程接口(API),DOM
将整个页面映射为一个由层次节点组成的文件.
有1级、2级、3级共三个级别
2.DOM的核心是提供了一套访问结构化文档
数据的API,其核心是节点的遍历访问及相关
操作。
3.在开发XML DOM的过程中,W3C发布了一个
针对HTML的DOM,即XHTML(符合XML格式的
HTML)。引入了HTMLDocument及HTMLElement
等类作为DOM的基本实现。每一个HTML元素
HTML拥有一个对应的HTMLElement类型,比如
HTMLDivElement代表<div>.除了一部分类增加
一些成员以外,大多数类提供的属性和方法都是
由HTMLElement提供。
document 就是一个HTML文档在内存中对应的对象
属性
window.onload = function(){
//所有的dom节点都支持这些属性
//获得文档的根节点,相当于html文档里面的<html>标签
var root = document.documentElement;
var div = document.getElementById("test");//div加载完才能使用
//Dom的属性 1.nodeName
//alert(root.nodeName + ":" + div.nodeName);
//2.nodeValue获得节点中的文本值
alert(root.nodeValue + ":" + div.firstChild.nodeValue);
//3.nodeType有三种,代表1、标签、2、属性、3、文本
alert(root.nodeType + ":" + div.firstChild.nodeType+":"+div.getAttributeNode("id").nodeType);
//4.firstChild得到第一个子节点
//5.lastChild得到最后一个子节点
//6.childNodes所有子节点
//7.previousSibling前一个节点
//8.nextSibling 后一个节点
//9.ownerDocument 获得该节点所属的文档对象
//10.attributes 代表一个节点的属性对象
}
---------------------
<div id="test">123</div>
*dom节点有三种
1. div为 标签节点
2. id为attribute节点 id="test" 也是一个dom对象
3. 123为文本节点
//补充
console.dir(body);
body下有个childNodes 查看子节点
方法(在父节点调用) 返回值 说明
hasChildNodes() Boolean 当前节点是否有子节点
appendChild(node) Node 往当前节点上添加子节点
removeChild(node) Node 删除子节点
replaceChild(newNode,oldNode) 同上 替换子节点
insertBefore(newNode,refNode) 同上 在指定节点的前面插入新节点
dom节点的增删改查
1.增加
//在第二个div后面加入一个新的div
//创建一个新节点
var newNode = document.createElement("DIV");
var textNode = document.createTextNode("This is a new Node");//这里的文本值以后是从数据库查出来的,然后渲染到页面上
newNode.appendChild(textNode);
var body = document.body;//root.lastChild;
var thirdDiv = document.getElementById("third");
body.insertBefore(newNode,thirdDiv);
2.删除
//删除第二个节点
var secondDiv = document.getElementById("second");
secondDiv.parentNode.removeChild(secondDiv);//所有的节点都有一个parentNode得到父节点
3.修改
replaceChild(oldNode,newNode)
4.查询
getElementById 获得指定id的dom节点
getElementsByName 获得指定名称的节点集合
getElementsByTagName 获得指定标签的节点集合
(得到所有的div节点、a节点)
例:得到页面的所有元素
var oAllElements = document.getElementsByTagName("*");
或者
var oAllElements = document.all;//针对IE6
document方法
createElement(tagName):创建标签节点
createTextNode(s):创建文本节点
appendChild(node) 往当前节点上添加子节点
当我们直接往document的元素上添加节点时,每
执行依据添加都会造成页面刷新,从而影响性能,
此时可以考虑使用html片段的方式,也就是使用
createDocumentFragment()来优化,只渲染一次文档
*得到、设置dom节点的属性
Core DOM
<img src="mypicture.jpg" border="0"/>
dom节点.getAttribute("src");
dom节点.setAttribute("src","mypicture2.jpg");
xhtml dom还提供了便利的访问形式
dom节点.src
dom节点.src="mypicture2.jpg";
访问class要用className
<div class="header"></div>
oDiv.className="footer";
使用DOM来动态创建表格
即用document.createElement("");
document.createTextNode("");
一步一步创建
访问表格数据
vat table = document.getElementById("table");
var cell4 = table.tBodies[0].rows[1].cells[1];
alert(cell4.innerHTML);
重点1:使用xhtml DOM创建表格
总结:表里添行,行里添列,列里添内容
table.deleteRow(1);//删除第二行
table.insertRow(1);//插入新行到第二行
<table border="1" width="100%">
<tr>
<td>Cell1,1</td>
<td>Cell1,2</td>
</tr>
<tr>
<td>Cell2,1</td>
<td>Cell2,2</td>
</tr>
</table>
var table = document.createElement("table");
table.border="1";
table.width="100%";
//新建一行
table.insertRow(0);
table.rows[0].insertCell(0);
table.rows[0].cells[0].appendChild(
document.createTextNode("Cell1,1");
);
table.rows[0].insertCell(1);
table.rows[0].cells[1].appendChild(
document.createTextNode("Cell1,2");
);
table.insertRow(1);
table.rows[1].insertCell(0);
table.rows[1].cells[0].appendChild(
document.createTextNode("Cell2,1");
);
table.rows[1].insertCell(1);
table.rows[1].cells[1].appendChild(
document.createTextNode("Cell1,2");
);
document.body.appendChild(table);
重点2:操作样式
所有的dom对象都有style属性,style为只读的
<div id="test" style="background-color:#069">123</div>
//js操作样式
var div1 = document.getElementById("test");
div.style.backgroundColor="red";//样式表-号去掉,后面字母变大写
查看属性样式
console.dir(document.body.style);
隐藏节点
dom对象.style.display="none";
.