DOM高级

标签：form   element   创建   nodevalue   ntb   child   image   link   注释   

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);
}

DOM高级

标签：form   element   创建   nodevalue   ntb   child   image   link   注释   

原文地址：http://www.cnblogs.com/gengxinnihaoma/p/7403259.html