JavaScript之DOM的基本操作

查

document	代表整个文档
document.getElementById()	通过id标识选择这个元素，一个id对应一个元素
.getElementsByTagName()	通过标签名来选中
.getElementsByName()	只有部分标签name可生效（表单，表单元素，img，iframe）
.getElementsByClassName()	通过类名来选中，但是ie8和ie8以下的ie版本中没有，可以多个Class一起被选中
.querySelector()	css选择器   选中一个  css中怎么选中一个元素，这里就怎么选中  静态的，不会根据代码的变化而变化
.querySelectorAll()	css选择器，选中一组 ,选中的元素是实时的根据代码的变化而变化

使用方法可以见一些例题参考：https://blog.csdn.net/gxgalaxy/article/details/90317290

遍历节点树

parentNode	父节点（最顶端的parentNode为#document,一个元素只有一个父级）
childNodes	子节点，选的是所有的子节点
nextSibling	后一个兄弟节点
previousSibling	前一个兄弟节点

遍历元素节点树

parentElement	返回当前元素的父元素节点 (IE9及以下不兼容)
children	返回当前元素的元素子节点
node.childElementCount == node.children.length	当前元素节点的子元素
firstElementChild	返回的是第一个元素节点 (IE9及以下不兼容)
lastElementChild	返回的是最后一个元素节点(IE9及以下不兼容)

 

节点的类型：元素节点、属性节点、文本节点、注释节点、document、DocumentFragment

节点的四个属性：

• nodeName   元素的标签名，以大写形式表示，只读，字符串形式。
• nodeValue   返回text节点或者Comment节点的文本内容，可写读
• nodeType    返回该节点的类型，只读

类型	返回的数
元素节点	1
属性节点	2
文本节点	3
注释节点	8
document	9
DocumentFragment	11

• attributes Element节点的属性集合

增

document.createElement()	创建一个元素节点
document.createTextNode()	创建文本节点
document.createComment()	创建注释节点
document.createDocumentFragment()	创建文档碎片节点

插

PARNTNODE.appendChild	相当于push操作
PARNTNODE.insertBefore(a,b)	父级调用往父级里面去插入元素（a是要插入元素，b是坐标）

删

parent.removeChild()	父节点删除自己的子节点，剪切删除
child.remove()	自己删除自己，彻底销毁

替换

parentNode.replaceChild(new,origin)

 

Element节点的一些属性

1、innerHTML改变一个元素里面的html内容（取和写），写进去的都会被识别

 2、innerText（火狐不兼容，火狐使用textContent（但是老版本IE不好使）） 会把其他结构都改掉

Element节点的一些方法

ele.setAttribute(属性名，属性值)	给div设置一个行间属性
ele.getAttribute()	取出一个元素的行间属性

                                   

例题：

实现下面：

<script type="text/javascript">
        var div =document.createElement('div');
	var p = document.createElement('p');
	div.setAttribute('class','demo');
	p.setAttribute('class','slogan');
	var text = document.createTextNode('123');
	p.appendChild(text);
	div.appendChild(p);
	document.body.appendChild(div);
</script>