Document Object Model
用来操作 html 和 xml 功能的一类对象的集合
document 代表整个文档
通过元素的 id 属性值选择
var div = document.getElementById('only');
定义在了 Document.prototype 上
ie8以下的浏览器,不区分 id 大小写,而且 name 和 id 一样的元素,也可以选出来
通过标签名的方式选择所有,放到一个类数组中
var div = document.getElementsByTagName('current')[0];
定义在了 Document.prototype 和 Element.prototype 上
var div = document.getElementsByTagName('div')[0]; var span = div.document.getElementsByTagName('span')[0];
还可以使用 通配符 *
选择全部选择器;
无任何兼容性问题,较为常用
t通过 name 属性值选择所有,放到一个类数组中
var div = document.getElementsByName('current')[0];
定义在了 HTMLDocument.prototype 上,即 XML 不能可用
name 并不是在所有标签内都好使
通过类名 class 选择所有,放到一个类数组中
var div = document.getElementsByClassName('current')[0];
ie8和ie8以下的ie版本中没有
选一个
var strong = document.querySelector('div > span strong.demo');
选一组
var strong = document.querySelectorAll('div > span strong.demo');
以上两个 query 的选择器的缺点:
均无兼容性问题
一个元素只有一个父节点,document 就是最高的
null > document > html > body > …
获取一个元素所有的子节点,包括 文本、注释、属性、元素等
获取元素的第一个子节点
获取元素的最后一个子节点
获取元素的后一个兄弟节点
获取元素的前一个兄弟节点
除 children 无兼容性问题外,其他的均是 ie9及ie9以下不兼容
父元素节点,没有到 document
null > html > body > …
获取元素的所有元素子节点
元素的元素字节点的个数
node.childElementCount === node.children.length
第一个元素子节点
最后一个元素子节点
上一个兄弟元素节点
后一个兄弟元素节点
// 返回指定兄弟节点 function retSibling(e, n) { while (e && n) { if (n > 0) { if (e.nextElementSibling) { e = e.nextElementSibling; } else { for (e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling); } n--; } else { if (e.previousElementSibling;) { e = e.previousElementSibling; } else { for (e = e.previousElementSibling; e && e.nodeType != 1; e = e.previousSibling); } } } return e; }
节点的四个属性:
// 自定义 获取所有元素子节点 function retElementChild(node) { // no children var temp = { length : 0, push : Array.prototype.push, splice : Array.prototype.splice }, child = node.childNodes, len = child.length; for(var i = 0; i < len; i++) { if (child[i].nodeType === 1) { temp.push(child[i]); } } return temp; }
判断元素是否具有子节点,返回 boolean值
后面的数字是 nodeType 属性返回的值
元素节点 – 1
属性节点 – 2
文本节点 – 3
注释节点 – 8
document – 9
document --> HTMLDocument --> Document --> Node --> EventTarget --> Object
domTree + cssTree = rangerTree
重排(reflow):整个界面进行重构,效率很低,要尽量避免
重绘(repaint):效率相对消耗比较少,对应位置改变
创建元素节点,括号内写标签名
var div = document.createElment('div');
创建文本节点
var text = document.createTextNode('AgoniLay');
创建注释节点
var comment = document.createComment('This is AgoniLay!')
将节点添加到调用者中,类似于 push
var div = document.getElementsByTagName('div')[0]; var text = document.createTextNode('AgoniLay'); div.appendChild(text);
将已在界面内的节点添加到别的中去
是剪切效果,原先的会被剪切到要添加的地方
将要插入的 插入到元素中去,并且插入到 第二个参数所代表元素 之前
div.insertBefore(strong, span);
自己封装 insertAfter() 方法
Element.prototype.insertAfter = funtion (targetNode, afterNode) { var beforeNode = afterNode.nextElementSibling; if (beforeNode == null) { this.appendChild(targetNode); } else { this.insertBefore(targetNode, beforeNode); } }
父节点剪切出自己的子节点,作为返回值返回出来
自己将自己本身销毁,无返回值
由父节点调用,用新的 替换 旧的,并将旧的返回出来
parentNode.replaceChild(new, origin)
改变一个元素中的 html 内容
div.innerHTML = '123'; // 会将原来里面的所有值覆盖 div.innerHTML += '456'; // 先取值,在追加 --> 可读可写
会识别括号内的一系列 html 文本
读写标签内的文本,但是会覆盖
innerText() 方法 老版本火狐不兼容,火狐中有 textContent() 方法,但此方法 老版本ie 不好使
设置行间属性
div.setAttribute('class', 'demo'); // div --> <div class="demo"></div> div.setAttribute('id', 'only'); // div --> <div class="demo" id="only"></div>
取到行内属性
div.getAttribute('id'); // --> only
可以读写元素节点的 class 属性
-
,则换成小驼峰式:background-color
--> backgroundColor
float
--> cssFloat
border: 1px soild red;
--> borderWidth="1px"; borderStyle="soild"; borderColor="red"
获取当前元素所展示出的一切 css 属性的显式值(最终显示出来的,包括默认值)
window.getComputedStyle(ele, null)[prop];
只读
返回的样式都是绝对值
第二个参数 null 的作用:获取伪元素的属性表
var div = document.getElementByTagName('div')[0]; window.getComputedStyle(div, "after");
IE8及IE8以下不兼容
div.currentStyle
--> CSSStyleDeclaration
兼容性问题解决:
function getStyle(elem, prop) { if (window.getComputedStyle) { return window.getComputedStyle(elem, null)[prop]; } else { return elem.currentStyle[prop]; } }