节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本。 3.属性节点:标签内的属性，id或class 查找元素: getElementById();参数传递一个元素的id值，这样就可以获取到该元素节点 DOM操作必须等待HTML文档加载完毕，才可以获取 怎样获取？ 1.把<script>移后 HTMLDivElement表示Div的节点对象 IE是以COM实现的DOM，所以只会返回一个object 2.用onload事件来加载html window.onload = function(){ var box = document.getElementById('box'); //这里存放当网页所有内容都加载完毕后，再执行的代码 alert(box); } 一个页面只能允许一个id，表示唯一性。 getElementById建议区分大小写，以免不兼容。 如果是IE5.0-，不兼容getElementById，可以做个判断 window.onload = function(){ if(document.getElementById){ var box = document.getElementById('box'); alert(box); }else{ alert('您的浏览器不兼容，请更换~'); } } //元素节点的属性 window.onload = function(){ var box = document.getElementById('box'); alert(box.tagName); //获取这个元素节点的标签名 alert(box.innerHTML); //获取这个元素节点里的文本,纯文本不包含标签 //innerHTMl获取的是这个元素的文本内容，而不是文本节点。 } window.onload = function(){ var box = document.getElementById('box'); box.innerHTML = 'ssssss<strong>ffff</strong>'; //赋值，可以解析HTML，不是单纯的文本。 } //HTML属性的属性 window.onload = function(){ var box = document.getElementById('box'); alert(box.id); //获取这个元素节点id的属性值，注意不是属性节点 alert(box.title); //获取title属性的值 alert(box.style); //获取style属性对象 alert(box.style.color;) //获取style属性对象中color属性的值 alert(box.className); //获取class属性的值 } //getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。 window.onload = function(){ var li = document.getElementsByTagName('li'); //参数传递一个标签名即可 alert(li); //返回一个数组集合，HTMLCollection alert(li.length); //返回数组的数量 alert(li[0]); //HTMLElement,li的节点对象 alert(li.item(0)); //同上，意义一致。HTMLElement alert(li[0].tagName); //LI。获得元素的标签名 alert(li[0].innerHTML); //1 } //返回body节点 window.onload = function(){ var body = document.getElementsByTagName('body')[0]; alert(body); //返回HTMLBodyElement对象，body节点。 } window.onload = function(){ var all = document.getElementsByTagName('*'); alert(all.length); //火狐浏览器的firebug打开后，会自动创建一个div，所以会多算一个。 alert(all[0].tagName); //IE浏览器比火狐和谷歌多一个节点，是把<!文档声明也算进去了> } window.onload = function(){ var input = document.getElementsByName('test')[0]; alert(input.value); alert(input.checked); }; //getAttribute() 方法返回指定属性名的属性值。 window.onload = function(){ var box = document.getElementById('box'); alert(box.getAttribute('style')); //非IE返回的是style字符串，IE返回的是对象，这里有个不兼容 alert(box.getAttribute('bbb')); //自定义可以兼容 alert(box.getAttribute('class')); //IE无法获取 alert(box.getAttribute('className')); //IE可以获取，非IE无法获取 //跨浏览器获取className if(box.getAttribute('className')==null){ alert(box.getAttribute('class')); }else{ alert(box.getAttribute('className')); } }; window.onload = function(){ var box = document.getElementById('box'); alert(box.onclick); //均返回函数式； alert(box.getAttribute('onclick')); //IE7以下会返回函数式，非IE返回字符串 }; window.onload = function(){ var box = document.getElementById('box'); //box.setAttribute('title','abc'); //创建一个属性和属性值 //box.setAttribute('align','center'); //box.setAttribute('bbb','cccc'); box.setAttribute('style','color:green'); //IE7以下，style和onclick没有效果，避免使用 }; window.onload = function(){ var box = document.getElementById('box'); box.removeAttribute('style'); //IE6一下不支持removeAttribute }; 3.DOM节点 window.onload = function(){ var box = document.getElementById('box'); alert(box.nodeName); //获取元素节点的标签名，和tagName等价 alert(box.nodeType); //获取元素节点的类型值，1 alert(box.nodeValue); //元素节点本身没有内容，所以是null //node本身把节点指针放在元素<div>上，也就是说，本身是没有value //如果要输出<div>中里面包含的文本内容，那么前面innerHTML alert(box.innerHTML); //获取元素节点里面的文本内容 //node只能获取当前节点的东西。 //文本节点 不等于 文本内容 }; window.onload = function(){ var box = document.getElementById('box'); alert(box.childNodes); //NodeList集合，返回当前元素节点所有的子节点列表 alert(box.childNodes.length); //3个子节点 //3个子节点为：div<em>sss</em>fefef //第一个子节点为：div，这个节点称作为：文本节点 //第二个子节点为：<em>sss</em>,这个节点称作为：元素节点 //第三个子节点为：文本节点。 alert(box.childNodes[0]); //Object Text表示一个文本节点对象 alert(box.childNodes[0].nodeType); //3,表示文本节点 alert(box.childNodes[0].nodeValue); //获取文本节点的文本内容 alert(box.childNodes[0].innerHTML); //当前的文本，找不到里面的内容，undefined alert(box.childNodes[0].nodeName); //#text,文本节点没有标签名 }; //通过判断节点类型，来获取不同的输出 window.onload = function(){ var box = document.getElementById('box'); for(var i = 0; i<box.childNodes.length; i++){ if(box.childNodes[i].nodeType === 1){ alert('元素节点：'+box.childNodes[i].nodeName); }else if(box.childNodes[0].nodeType === 3){ alert('文本节点：'+box.childNodes[i].nodeValue); } } }; window.onload = function(){ var pox = document.getElementById('pox'); //pox.innerHTML = 'sssss'; //pox.nodeValue = 'eefefeffef'; //没出错，但没有赋值上，nodeValue必须在当前节点上操作。 pox.childNodes[0].nodeValue = 'dfdfdff'； }; window.onload = function(){ var box = document.getElementById('box'); //alert(box.childNodes[0].nodeValue); //获取第一个子节点 //alert(box.childNodes[box.childNodes.length -1].nodeValue); //获取最后一个子节点 }; firstChild和lastChild属性 window.onload = function(){ var box = document.getElementById('box'); alert(box.firstChild.nodeValue); //获取第一个子节点 alert(box.lastChild.nodeValue); //获取最后一个子节点 }; //返回文档对象的根节点 window.onload = function(){ var box = document.getElementById('box'); //alert(box.ownerDocument); //HTMLDocument //alert(document); //HTMLDocument alert(box.ownerDocument === document); }; window.onload = function(){ var box = document.getElementById('box'); //alert(box.parentNode); //HTMLBodyElement //alert(box.firstChild.nextSibling); //HTMLSpanElement //alert(box.firstChild.nextSibling.nodeName); //下一个同级节点的标签名 //alert(box.lastChild.previousSibling.nodeName); //上一个同级节点的标签名 }; //attributes 属性返回指定节点的属性集合，即 NamedNodeMap。 window.onload = function(){ var box = document.getElementById('box'); //alert(box.attributes); //NamedNodeMap，集合数组，保存着这个元素节点的属性列表 //alert(box.attributes.length); //alert(box.attributes[0]); //Attr,属性节点 //alert(box.attributes[0].nodeType); //2,属性节点的类型值 //alert(box.attributes[0].nodeValue); //box，第一个属性的属性值 //lert(box.attributes[0].nodeName); //id,第一个属性的属性名 //alert(box.attributes['title'].nodeValue); //遍历的时候，是从后向前的 }; window.onload = function(){ var box = document.getElementById('box'); alert(box.childNodes.length); //有7个节点，包括了空白节点 }; window.onload = function(){ var box = document.getElementById('box'); alert(filterWhiteNode(box.childNodes).length); }; //忽略空白字符 function filterWhiteNode(node){ var ret=[]; for(var i = 0; i<node.length; i++){ if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)){ continue; }else{ ret.push(node[i]); } } return ret; } //移除空白字符 function filterWhiteNode(node){ for(var i = 0; i<node.childNodes.length; i++){ if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){ node.childNodes[i].parentNode.removeChild(node.childNodes[i]); } } return node; } window.onload = function(){ var box = document.getElementById('box'); var p = document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去 box.appendChild(p); //将新节点p添加到id=box的div里的子节点列表的末尾上 var text = document.createTextNode('sdfsdfsdf'); //创建一个文本节点 p.appendChild(text); //把文本添加到p里面 box.appendChild(p); document.getElementsByTagName('body')[0].appendChild(p); }; window.onload = function(){ var box = document.getElementById('box'); var p = document.createElement('p'); //box.parentNode就是body box.parentNode.insertBefore(p,box); //在box的父节点添加一个p，就是在box前面添加一个元素节点 }; //向后添加节点 window.onload = function(){ var box = document.getElementById('box'); var p = document.createElement('p'); insertAfter(p,box); }; function insertAfter(newElement,targetElement){ //得到父节点，就是body，但是不能直接使用body，如果层次较多，父节点不一定是body var parent = targetElement.parentNode; if(parent.lastChild === targetElement){ alert('ss'); parent.appendChild(newElement,targetElement) }else{ //span节点的前面添加，可以用insertBefore，span节点可以用nextSibling获取 parent.insertBefore(newElement,targetElement.nextSibling); } } //浏览器的兼容 window.onload = function(){ var body = document.getElementsByTagName('body')[0]; if(BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7){ var input = document.createElement("<input type=\"radio\" name=\"sex\">"); }else{ var input = document.createElement('input'); input.setAttribute('type','radio'); input.setAttribute('name','sex'); } body.appendChild(input); }; //replaceChild()方法用新节点替换某个子节点。 window.onload = function(){ var span = document.getElementsByTagName('span')[0]; var em = document.createElement('em'); span.parentNode.replaceChild(em,span); }; //cloneNode()方法克隆所有属性以及它们的值。 window.onload = function(){ var box = document.getElementById('box'); var clone = filterWhiteNode(box).firstChild.cloneNode(true); //克隆一个节点，如果是true就是把标签内的文本也克隆，如果是flase，只是克隆标签 box.appendChild(clone); }; //移除空白字符 function filterWhiteNode(node){ for(var i = 0; i<node.childNodes.length; i++){ if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){ node.childNodes[i].parentNode.removeChild(node.childNodes[i]); } } return node; } //removeChild()方法删除某个子节点。 window.onload = function(){ var box = document.getElementById('box'); //box.removeChild(filterWhiteNode(box).firstChild); //删除box第一个子节点 box.parentNode.removeChild(box);//删除整个box }; //移除空白字符 function filterWhiteNode(node){ for(var i = 0; i<node.childNodes.length; i++){ if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){ node.childNodes[i].parentNode.removeChild(node.childNodes[i]); } } return node; }
window.onload = function(){ //alert(Node); //IE不支持 //if(xxx.nodeType === 1); //表示判断元素节点 //if(xxx.nodeType === 3); //表示判断文本节点 //alert(Node.ELEMENT_NODE); //表示元素节点的类型值 //alert(Node.TEXT_NODE); //表示文本节点的类型值 //if(xxx.nodeType === Node.ELEMENT_NODE); //if(xxx.nodeType === Node.TEXT_NODE); //if(xxx.nodeType === 元素); //if(xxx.nodeType === 文本); }; if(typeof Node == 'undefined'){ //创建一个全局Node window.Node={ ELEMENT_NODE:1, TEXT_NODE:2 }; } alert(Node.ELEMENT_NODE); alert(Node.TEXT_NODE); 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为#document //alert(document.childNodes[1]); //HTMLHtmlElement //alert(document.childNodes[1].nodeType); //1 //alert(document.childNodes[1].nodeName); }; window.onload = function(){ alert(document.documentElement); //HTMLHtmlElement alert(document.body.nodeName); //获取body alert(document.doctype); //DocumentType,IE会显示null }; window.onload = function(){ //alert(document.title); //document.title = 'box'; alert(document.URL); alert(document.domain); alert(document.referrer); alert(document.images.length); }; 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); alert(box.childNodes[0].nodeValue); }; window.onload = function(){ var box = document.getElementById('box'); box.childNodes[0].splitText(3); //把前三个字符分离成新节点 alert(box.childNodes[0].nodeValue); }; window.onload = function(){ var box = document.getElementById('box'); //box.childNodes[0].deleteData(0,3); //把前三个字符删除 //box.childNodes[0].insertData(0,'Hello!'); //添加字符串 //box.childNodes[0].replaceData(0,2,'Miss'); //替换 //alert(box.childNodes[0].substringData(0,2)); //alert(box.childNodes[0].nodeValue); }; window.onload = function(){ //var box = document.getElementById('box'); //alert(box.firstChild); //Comment //alert(box.firstChild.nodeType); //8 //alert(box.firstChild.nodeValue); //我是注释 var c = document.getElementsByTagName('!'); //IE支持，其他不支持 alert(c[1].nodeValue); }; window.onload = function(){ if(document.compatMode == 'CSS1Compat'){ alert(document.documentElement.clientWidth); }else{ alert(document.body.clientWidth); } }; window.onload = function(){ //document.getElementById('box').scrollIntoView(); //将指定的节点滚动到可见范围内 var box = document.getElementById('box'); //alert(box.childNodes.length); //alert(box.children.length); //忽略掉了空白节点 alert(box.children[0].nodeName); }; window.onload = function(){ var box = document.getElementById('box'); var p = box.firstChild; //alert(box.contains(p)); //判断box是不是p的父节点 //火狐旧版本不支持。新版本支持 //safari2.x不支持，3.0以上才支持 //很多更低的版本，提供的两个方案均不支持 //alert(box.compareDocumentPosition(p)>16); //包含关系 alert(contains(box,p)); }; //浏览器兼容 function contains(refNode,otherNode){ if(typeof refNode.contains == 'undefined'){ return refNode.contains(otherNode); }else if(typeof refNode.compareDocumentPosition == 'function'){ return refNode.compareDocumentPosition(otherNode)>16; } } window.onload = function(){ var box = document.getElementById('box'); //alert(box.innerText); //获取文本并过滤HTML，直接删掉。 //box.innerText = '<b>123</b>'; //赋值并转义HTML alert(box.textContent); }; window.onload = function(){ var box = document.getElementById('box'); //alert(document.getElementById('box').innerHTML); //获取文本（不过滤HTML） //document.getElementById('box').innerHTML = '<b>123</b>'; //可解析HTML document.getElementById('box').innerHTML = "<script>alert('')</script>"; //不能执行 }; window.onload = function(){ var box = document.getElementById('box'); //alert(box.outerText); //box.outerHTML = '<b>123</b>'; box.outerText = '<b>123</b>'; alert(document.getElementById('box')); //null表明<div>这个标签被抹去 };
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
