DOM(文档对象模型是针对HTML和XML文档的一个API)
节点层次
1.node类型
(1)DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。
(2)节点关系
每一个节点都有一个childNodes属性,保存一个类数组对象NodeList.
转化类数组对象为数组
function converToArray(nodes){
var array = null;
try{
//返回一个新数组
array = Array.prototype.slice(someNode.childNodes,0);
}
catch{
array = new Array()
for(var i = 0; i < i.length; i++ ){
array.push(nodes[i])
}
}
return array;
}
(3)节点方法
appendChild() 向childNodes列表末尾插入节点
var span = document.createElement('span');
span.innerText = '1';
res.appendChild(span);
insertBefore() 接受2个参数,要插入的节点和作为参照的节点,如果参照节点不传,则和appendChild作用相同
replaceChild() 接收2个参数,要插入的节点和要替换的节点
removeChild() 移除否个节点
var formaerFirstChild = someNode.removeChild(someNode.firstChild)
cloneNode() 接受一个参数,是否执行深度复制
2.Document类型
(1)文档的子节点
在浏览器中, document 对象是 HTMLDocument（继承自 Document 类型）的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问
var body = document.body //取得对body的引用
var doctype = document.doctype //取得对的引用
(2)文档信息
document.title = 'New page title' //设置文档标题
document.URL //取得完整的 URL
document.domain //取得域名
document.referrer //取得来源页面的 URL
(3)查找元素
getElementById()和 getElementsByTagName()和 getElementsByClassName()
document.querySelector() //返回匹配的第一个元素
document.querySelectorAll() // 返回一个NodeList
(4)特殊集合
document.anchors 包含文档中所有带 name 特性的元素；
document.applets 包含文档中所有的
(5)DOM一致性检测
var hasXmlDom = document.implementation.hasFeature("XML", "1.0");
(6)文档写入
write()、 writeln()、 open()和 close()
3.Element
(1)HTML元素
id 元素在文档中的唯一标识符。
title 有关元素的附加说明信息,一般通过工具提示条显示出来。
className 与元素的 class 特性对应,即为元素指定的 CSS 类。没有将这个属性命名为 class
lang 元素内容的语言代码
dir 语言的方向 ltr/rtl
(2)元素属性
getAttribute()、 setAttribute()和 removeAttribute()
(3)创建元素
document.createElement("
")4.Text类型
文本节点由Text类型表示
document.createTextNode("Hello world!");
DOM操作技术
1.动态脚本
动态加载的外部 JavaScript 文件能够立即运行，比如下面的 function loadScript(url){ var script = document.createElement('script'); script.type = 'text/javscript'; script.src = url document.body.appendChild(script); }
2.动态样式
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
loadStyles("styles.css");
3.操作表格
var table = document.createElement('table');
table.border = 1;
table.width = '100%';
var tbody = document.createElement('tbody');
table.appendChild(tbody);
//创建第一个行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1-1'))
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1-2'))
HTML5扩展
(1)classList属性
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
(2)自定义数据属性dataset
//设置dataset
div.dataset.appId = 23456;
(3)插入标记
innerHTML，outerHTML
DOM2 DOM3级
样式
1.访问元素的样式
2.操作元素的样式表
3.元素的大小。元素的可见大小由其高度，宽度决定。
(1)偏移量
获取元素组屏幕上占用的所有可见的空间
offsetHeight,offsetWidth（包括内容，内边距，边框）
offsetLeft,offsetTop
(2)客户区大小
指的是元素内容及其内边距所占的大小（不包括边框）
clientHeight,clientWidth
(3)滚动大小
scrollHeight 元素的总高度
scrollWidth 元素的总宽度
scrollLeft 元素滚动的left位置
scrollTop
(4)元素的位置
left，top，right，bottom