Dom编程进阶(第六课)

dom,每个浏览器实现的都不一样dom节点分3种：1.元素节点<div></div>2.属性节点<div name="我是属性节点"></div>3.文本节点,<div>我是文本节点</div>//获取一个dom节点方法如下：--------------------------------------------------//getElementById();if(document.getElementById){//判断浏览器是否支持这个方法alert(document.getElementById("div1"));}//获取节点的tagNamealert(node.tagName);//如果是div，结果就为div//获取节点的属性值,不是属性节点alert(node.id);//获取ID，没有则返回空字符串alert(node.title);//获取title，没有则返回空字符串alert(node.style);//获取style属性对象alert(node.style.color);//获取style属性对象中的值alert(node.className);//不能使用class//获取节点的内容,不是文本节点alert(node.innerHTML);//包含里面的htmlnode.innerHTML="<span>123</span>";//还可以设置内容------------------------------------------------------------getElementsByTagName();//获取所有的标签名字的集合var list=document.getElementsByTagName("div");//返回所有的divalert(list.length);//返回一共多少个divalert(list[0]);//返回第一个div对象//获取body节点var body1=document.getElementsByTagName("body")[0];//返回body节点alert(body1);////获取所有的节点var list=document.getElementsByTagName("*");//返回body节点alert(list[0]);//第一个是html节点      有些浏览器会把dtd也当作第一个节点,所有咱们得判断一下if(list[0]=="!"){alert(list[1]);//这才是html节点}------------------------------------------------------------getElementsName();获取所有名字为name=dd 的元素,一般用在input标签里面如果用在了div上,某些浏览器可能会不支持alert(document.getElementsName("name").length);------------------------------------------------------------getAttribute();//返回字符串获取元素上的属性,如果获取的是style,他返回的是一个字符串(有些浏览器返回的是style对象),而不是一个对象,还可以获取自定义的属性值var node=document.getElementById("box");alert( node.getAttribute("style"));//将会返回一个字符串alert( node.getAttribute("class"));//某些浏览器需要使用className//咱们来看看如何兼容var node=document.getElementById("box");if(node.getAttribute("class")==null){//如果等于null的话alert(node.getAttribute("className"));}else{alert(node.getAttribute("class"));}//如何返回onclick的函数var node=document.getElementById("box");alert(node.getAttribute("onclick"));//返回onclick里面的字符串，某些浏览器会返回function对象,------------------------------------------------------------setAttribute();//设置元素的属性字符串var node=document.getElementById("box");node.setAttribute('title','标题');node.setAttribute('自定义','标题');node.setAttribute('style','color:red;');//某些浏览器不支持------------------------------------------------------------removeAttribute();//设置元素的属性字符串var node=document.getElementById("box");node.removeAttribute('title');//移除标题,IE6以下版本不支持----------DOM-----------------------------------------nodeName  div:div,文本:#textnodeType  div：1;  文本:3,属性:2nodeValue div:null;文本:"内容",元素 1 属性 2 文本 3 注释 8 文档 9 <div id="box" style="color:red;" aa="sdf">123</div>var node=document.getElementById("box");alert(node.nodeName);//divalert(node.nodeType);//1alert(node.nodeValue);//null################childNodes;子节点,返回所有的子节点<div id="box" style="color:red;" aa="sdf">1233  <b></b> 456</div>var node=document.getElementById("box");alert(node.childNodes.length);//3第一个节点:1233  ，第二个为<b></b> 第三个为456获取第一个节点:alert(node.childNodes[0]);//text  文本对象获取他的节点类型alert(node.childNodes[0].nodeType);//因为是文本对象,所以为  3获取文本节点的内容alert(node.childNodes[0].nodeValue);//文本元素是不可以使用innerHTML的,因为他没有子节点node.childNodes[0].nodeValue="<span>sdf</span>";//如果包含html的话,他会当作纯文本输出,修改元素节点的内容获取文本节点的namealert(node.childNodes[0].nodeName);//因为没有名字,所以为#text################ firstChild;获取第一个节点对象alert(node.firstChild);################ lastChild;获取第一个节点对象alert(node.lastChild);################ parentNode;获取父节点alert(node.parentNode);################ previousSibling;获取上一个同级节点,没有返回nullalert(node.previousSibling);################ nextSibling;获取下个一同级节点alert(node.nextSibling);################ attributes;NamedNodeMap  属性的集合数组<div id="box" style="color:red;" aa="sdf">1233  <b></b> 456</div>var as = node.attributes;alert(as.length);//结果为3alert(as[0].nodeType);//为2,因为是属性节点alert(as[0].nodeName);//为aa，从后向前的alert(as[0].nodeValue);//为sdf，属性节点的值################ 过滤空白节点 node.childNodes，某些浏览器会把空白节点也算上,所以咱们得写个过滤的方法function filterChildNodes(childNodes_){var array[];for(var i=0;i<childNodes_;i++){//在这里判断是否为空白节点var node = childNodes_[i];if(node.nodeType==3 && /^\s+$/.test(node.nodeValue)){continue;}array[array.length]=node;}return array;}################ 过滤第一个空白节点 node.firstChild，某些浏览器会把空白节点也算上,所以咱们得写个过滤的方法function filterFirstChild(firstChild_){while(true){if(firstChild_==null){return null;//如果为null就不判断了}if(firstChild_.nodeType==3 && /^\s+$/.test(firstChild_.nodeValue)){//是空白节点firstChild_=firstChild_.nextChild;//把自己当成下一个节点continue;}return firstChild_;}}################ 过滤最后一个空白节点 node.previousSibling，某些浏览器会把空白节点也算上,所以咱们得写个过滤的方法function filterChildNodes(lastChild_){while(true){if(lastChild_==null){return null;//如果为null就不判断了}if(lastChild_.nodeType==3 && /^\s+$/.test(lastChild_.nodeValue)){//是空白节点lastChild_=firstChild_.previousSibling;//把自己当成下一个节点continue;}return lastChild_;}}-----------DOM的增删查改---------------------------------------document.write("<b>sdf</b>");//页面将会被清除(js放在后面不会被清除),向页面输出内容###########创建一个元素节点 createElement()var p = document.createElement('p');//创建了一个元素对象p1.获取body元素,2.添加到body元素里面var body_ = document.body;//可以直接获取bodyalert(body.appendChild(p));//把p元素添加到body元素###########创建一个文本元素节点 createTextNode()1.把p元素内容为123a 的元素 添加到 body的末尾 1.先创建p元素 2.在创建文本元素 3.在把文本元素添加到p元素 4.在获取body元素 5.在把p元素添加到body的末尾//1.创建了一个元素对象pvar p = document.createElement('p');//2.在创建文本元素var text = document.createTextNode('123a');//3.在把文本元素添加到p元素p.appendChild(text);//4.在获取body元素var body_=document.body;//5.在把p元素添加到body的末尾body_.appendChild(p);###########在XX节点前面添加一个节点 insertBefore()var d = document.getElementById("box");d.parentNode.insertBefore(p,d);//第一个参数为你要添加的,第二个参数为你想在哪个对象前面添加###########在XX节点后面添加一个节点 ,他没有提供,我们可以自己写一个function insertAfter(myNode,targetNode){//1.先得到父节点//2.在得到父节点的下一个兄弟节点//3.在利用得到的兄弟节点调用insertBefore//1.先得到父节点var parent=targetNode.parentChild;//父节点//如果要添加的元素是父节点的最后一个,if(parent.lastChild==targetNode){parent.insertBefore(myNode,targetNode);return;}//2.在得到父节点的下一个兄弟节点var nextNode=parent.nextChild;//3.在利用得到的兄弟节点调用insertBeforenextNode.parentNode.insertBefore(myNode,nextNode);}###########替换节点,通过父节点来替换子节点//1.创建了一个元素对象pvar p = document.createElement('p');//2.在创建文本元素var text = document.createTextNode('123sda');//3.在把文本元素添加到p元素p.appendChild(text);var d = document.getElementById("box");d.parentNode.replaceChild(p,d);//第一个参数为新节点，第二个为目标节点}########### 克隆一个节点 cloneNode<div id="box" style="color:red;" aa="sdf">1233  <b></b> 456</div>var b = document.getElementById("box");//克隆第一个节点var cloneNode = b.firstChild.cloneNode(true);//如果为flase,他不会克隆内容b.appendChild(cloneNode);