标签:dom htmlelement 节点 appendchild insertbefore
一、HTMLCollection对象
<1>
getElementById(‘‘)
getElementsByTagName(‘‘);
getElementsByName(‘‘);
<2>
document.anchors
document.forms
document.images
document.links
<1>和<2>返回的均是HTMLCollection对象
namedItem(‘‘)方法
var myImg = images.namedItem(‘small‘);
var myImg = images[‘small‘];
二者等价
二、HTMLElement对象操作
ele.innerHTML;//设置内部html ele.innerText;//设置内部text ele.appendChild(child);//尾部加入子节点 ele.insertBefore(child, null);//等价于ele.appendChild(child); ele.insertBefore(child, benchmarkNode);//在基准节点之前插入子节点(benchmarkNode为基准节点) insertAfter(ele, child, benchmarkNode);//在基准节点之后插入子节点(需要自己实现) ele.replaceChild(child, oldNode);//替换子节点 ele.removeChild(child);//移除节点 ele.cloneNode();//节点克隆(返回克隆后的节点) document.createElement(ele);//创建元素节点 document.createTextNode(txtEle);//创建文本节点
function insertAfter(ele, newNode, benchmarkNode){ ele.insertBefore(newNode, benchmarkNode.nextSibling); }
childNodes(包括所有 element和text节点 节点集合) firstChild 第一个子节点,等价于childNodes[0] lastChild 最后一个子节点,等价于childNodes[childNodes.length-1]; parentNode 父节点(仅一个) nextSibling 同级别下一个兄弟节点 previousSibling 同级别上一个兄弟节点
var mydiv = document.createElement(‘div‘);
<1>
mydiv.setAttribute("class", "ping");
console.log(mydiv.getAttribute("class"));
<2>
mydiv.className = "ping";
console.log(mydiv.className);
<3>
div.removeAttribute("class");//属性移除
tip:
<1>可以设置包括自定义属性在内的所有属性,<2>不能设置自定义属性。
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型。
attributes属性中包含一个NamedNodeMap,这是一个动态的集合。
元素的每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中。
NamedNodeMap对象包含如下方法、属性:
getNamedItem(name);
removeNamedItem(name);
setNamedItem(node);
item(pos);
attributes.length;
测试:
var mydiv = document.createElement('div'); mydiv.setAttribute('id', 'wrap'); mydiv.setAttribute('class', 'ping'); mydiv.setAttribute('bg', 'yuyu'); var oldAttr = mydiv.attributes.getNamedItem('bg'); console.log(oldAttr);//yuyu var newAttr = document.createAttribute('conn'); newAttr.nodeValue = "link"; mydiv.attributes.setNamedItem(newAttr); console.log(mydiv.attributes); console.log(item(2));
function outputAttribute(ele){ var res = []; for(var i=0, len = ele.attributes.length; i < len; i++){ var obj = {}; obj.attrname = ele.attributes[i].nodeName; obj.attrvalue = ele.attributes[i].nodeValue; res.push(obj); } return res; } var mydiv = document.createElement('div'); mydiv.setAttribute('id', 'wrap'); mydiv.setAttribute('class', 'ping'); mydiv.setAttribute('bg', 'yuyu'); var attrs = outputAttribute(mydiv); console.log(attrs);
console.log(tagName == nodeName) //true console.log(document.nodeType);//9 console.log(document.nodeValue);//null console.log(document.nodeName);//#document var mydiv = document.createElement('div'); console.log(mydiv.nodeType);//1 console.log(mydiv.nodeValue);//null console.log(mydiv.nodeName);//DIV (默认大写) var mytext = document.createTextNode('txt'); console.log(mytext.nodeType);//3 console.log(mytext.nodeValue);//txt console.log(mytext.nodeName);//#text
function getRealChildren(ele) { var real = []; for (var i = 0, len = ele.childNodes.length; i < len; i++) { if (ele.childNodes[i].nodeType == 1) { real.push(ele.childNodes[i]); } } return real; }
function getRealParentObj(ele){ for (var i = 0; i < ele.childNodes.length; i++) { if (ele.childNodes[i].nodeType == 3) { ele.removeChild(ele.childNodes[i]); } } return ele; }
标签:dom htmlelement 节点 appendchild insertbefore
原文地址:http://blog.csdn.net/u011700203/article/details/45479395