JS原生DOM操作

JSDOM.MD

Javascript原生DOM操作总结

Version : 1.0.0-16-04-05 Author : LiuYue

0.相关

node是element的父类(Element.nodeType 的值为 1)(node的子类还有TextNode,注释等). document是node,但不是element

1.查找获得元素

	with(document|parentNode){
		querySelector('CSS选择器');//元素/null
		querySelectorAll('CSS选择器');//元素数组

		getElementById('ID');//元素/null
		getElementsByClassName('类名');//元素数组
		getElementsByName('name属性');//元素数组
		getElementsByTagName('标签名');//元素数组
	}

2.创建元素

	document.createElement('标签名');//元素
	document.createTextNode('文本内容');//元素
	existingElement.cloneNode(true/false);//克隆元素,参数:是否连同子元素一起复制

3.元素增减

	with(parentElement){
		appendChild(childElement);//在末尾插入元素
		removeChild(childElement);//删除子元素
		replaceChild(newElement, oldElement);//替换元素
		insertBefore(newElement, existingItem);//在某个元素之前添加新元素
	}

4.元素HTML属性

	with(Element){
		getAttribute(key);
		setAttribute(key, value);
		hasAttribute(key);
	}

5.元素关系内容字段

	with(Element){
		innerHTML;
		innerText,textContent;//前者除了FF都支持,后者除了IE都支持
		id,style,className,value;
		scrollTop;//滚动条距离顶部高度(一般测量body.scrollTop)
		offsetTop;//相对于文档顶部的高度(全部内容,从body一开始计算)
		//--关系--
		parentNode;//父节点(parentElement)
		previousElementSibling;//上一个DOM元素(previousSibling)
		nextElementSibling;//下一个DOM元素(nextSibling)
		children;//子DOM元素的数组(childNodes:所有元素,包括文本和注释)
		firstElementChild;//首个子DOM元素(firstChild)
		lastElementChild;//最后一个DOM元素(lastChild)
	}