DOM高级
1：表示判断元素节点
2：表示判断属性节点
3：表示判断文本节点
alert(Node.ELEMENT_NODE); //表示元素节点的类型值 1
alert(Node.TEXT_NODE); //表示文本节点的类型值 3
if(xxx.nodeType===Node.ELEMENT_NODE)
if(xxx.nodeType===Node.TEXT_NODE)
//通过英文常量来代替阿拉伯数字，使得判断更加的清晰
if(typeof Node=='undefined'){
//创建一个全局Node
window.Node={
ELEMENT_NODE:1,
TEXT_NODE:3
}
}
------------------------------------------------------------------------
window.onload=function(){
alert(document); //HTMLDocument
alert(document.nodeType); //9
alert(document.nodeValue); //null
alert(document.nodeName); //#document
alert(document.childNodes[0]); //DocumentType,IE理解为注释
alert(document.childNodes[0].nodeType); //10,IE为8
alert(document.childNodes[0].nodeName); //火狐为HTML，谷歌为html,IE为#comment,火狐新版本为html
alert(document.childNodes[1]); //[object HTMLHtmlElement]
alert(document.childNodes[1].nodeType); //1
alert(document.childNodes[1].nodeName); //HTML
alert(document.documentElement); //直接获取不用document.childNodes[1] [object HTMLHtmlElement]
alert(document.body); //直接获取BODY
alert(document.doctype); //IE会显示null
alert(document.title);
document.title='box';
alert(document.URL);
alert(document.domain); //必须在服务器端测试
alert(document.referrer); //必须在服务器端测试 获取上一个url，创建一个超链接跳转到本页面
}
//对象集合
document.anchors; //获取文档中带name属性的<a>元素集合
document.links; //获取文档中带href属性的<a>元素集合
document.forms; //获取文档中<form>元素集合
document.images; //获取文档中<img>元素集合
Element类型 nodeType是1
元素对应类型表
元素名 类型
HTML HTMLHtmlElement
DIV HTMLDivElement
BODY HTMLBodyElement
P HTMLParamElement
Text类型 nodeType是3
-------------------------------------------------------
<div></div>
window.onload=function(){
var box=document.getElementById('box');
var text1=document.createTextNode('Mr.');
var text2=document.createTextNode('Lee');
box.appendChild(text1);
box.appendChild(text2);
box.normalize(); //合并同一级别的文本节点
alert(box.childNodes.length); //未合并时是2 合并后是1
alert(box.childNodes[0].nodeValue);
}
<div>Mr.Lee</div>
window.onload=function(){
var box=document.getElementById('box');
box.childNodes[0].splitText(3); //把前三个字符分离成新节点
alert(box.childNodes[0].nodeValue);
}
<div>Mr.Lee</div>
window.onload=function(){
var box=document.getElementById('box');
box.childNodes[0].deleteDate(0,3); //删除
box.childNodes[0].insertData(0,'Hello,'); //添加
box.childNodes[0].replaceData(0,2,'Miss') //替换
alert(box.childNodes[0].substringData(0,2)); //Mr
alert(box.childNodes[0].nodeValue);
}
注释节点
<div><!--我是注释--></div>
window.onload=function(){
var box=document.getElementById('box');
alert(box.firstChild); //Comment
alert(box.firstChild.nodeType); //8
alert(box.firstChild.nodeValue); //我是注释
var c=document.getElementByTagName('!'); //IE支持，其他不支持
alert(c[1].nodeValue);
}
1.呈现模式
从IE6开始区分标准模式和混杂模式（怪异模式），主要是看文档的声明。IE为document对象添加了一个名为compatMode属
性，这个属性可以识别IE浏览器的文档处于什么模式，如果是标准模式，则返回CSS1Compat，如果是混杂模式则返回
BackCompat。
if(document.compatMode=='CSS1Compact'){
alert(document.documentElement.clientWidth);
}else{
alert(document.body.clientWidth);
}
2.滚动
document.getElementById('box').scrollIntoView(); //让指定的节点滚动到可见范围内
3.children属性
由于子节点空白问题，IE和其它浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用children
属性，支持的浏览器为：IE5+、Firefox3.5+、Safari2+、Opera8+和Chrome，这个属性是非标准的。
var box=document.getElementById('box');
alert(box.children.length); //得到有效子节点数目
4.contains
window.onload=function(){
var box=document.getElementById('box');
var p=box.firstChild;
alert(box.contains(p)); //判断box是不是p的父节点 true
alert(box.compareDocumentPosition(p)>16); //包含关系
//PS：火狐旧版本不支持3.6，新版支持14
//PS：Safari2.x不支持，3.0以上才支持
//PS：很多更低的版本，提供的两个方案均不支持
}
兼容处理 BrowserDetect.js
function contains(refNode,otherNode) {
if(typeof refNode.contains != 'undefined'&&!(BrowserDetect.browser=='Safari'&&BrowserDetect.version<3)){
return refNode.contains(otherNode);
}else if(typeof refNode.compareDocumentPosition=='function'){
return refNode.compareDocumentPosition(otherNode)>16;
}else {
var node=otherNode.parentNode;
do{
if(node==refNode){
return true;
}else {
node=otherNode.parentNode;
}
}while(node!=null) //感觉这块不太对
return false;
}
}
---------------------------------------------------------------------------------------
innerText
DOM操作内容
var box=document.getElementById('box');
alert(box.innerText); //获取文本并过滤掉HTML，直接删掉的，火狐不支持
box.innerText='<b>123</b>'; //赋值并转义HTML
alert(box.textContent); //火狐支持
兼容性：
function getInnerText(element){
if(typeof element.textContent=='string'){
return element.textContent;
}else{
return element.innerText;
}
}
function setInnerText(element,text){
if(typeof element.textContent=='string'){
element.textContent=text;
}else {
element.innerText=text;
}
}
innerHTML:把HTML解析进去
outerText:火狐不支持，赋值时候很危险 outerHTML
