码迷,mamicode.com
首页 > 其他好文 > 详细

DOM 文档对象

时间:2015-05-04 13:53:39      阅读:164      评论:0      收藏:0      [点我收藏+]

标签: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);//创建文本节点


扩展:实现insertAfter方法
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);

五、nodeType、nodeValue、nodeName
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

扩展一:
获取节点的元素子节点集合(非文本节点):
通过 ele.childNodes[i].nodeType 的值来进行判断

element: ele.childNodes[i].nodeType == 1
text: ele.childNodes[i].nodeType == 3
document: ele.childNodes[i].nodeType == 9

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 文档对象

标签:dom   htmlelement   节点   appendchild   insertbefore   

原文地址:http://blog.csdn.net/u011700203/article/details/45479395

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!