DOM小结

一，关系

javascript 有三部分构成，ECMAScript，DOM和BOM。

DOM【document object，model】

关系图

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

二，DOM html（DOM树）

节点遍历：

node.parentNode

node.firstChild

node.lastChild

node.previousSibling

node.nextSibling ..  

元素遍历：

p.firstElementChild

p.lastElementChild..

三，节点操作

1.获取节点--可维护性差

父子关系：parentNode

兄弟关系：previousSibling／previousElementSibling

getElementById，getElementByTagName，getElementByClassName，querySelect／All符合条件的第一个／全部。

ById只能用document调用，并且返回值是唯一的，不可以动态集合。

ByTagName可以动态集合。

ByClassName可以动态集合，

Selector 返回值唯一，不可以动态集合。

2.一系列：

创建节点：element=document.creatElement(TagName)

修改节点：element.text节点其后代节点的文本内容。

                   element.innerText="";

                   IE9以下：user_last.textContent="要替换的内容"；

---

插入节点：var child=element.appendChild(achild);

                   element.appendChild(element);要插入到那里

---

                   var achild=element.insertBefore(achild,referenceChild)要插入的，插入到什么之前。

删除节点：child=element.removeChild(child);child.parentNode.remove(child);

创建+插入：element.innerHTML存在内存泄漏，安全等问题。

四。练习

查看当前用户数

var users=document.getElementById("users");

var a=document.getElementsByTagName("li");

alert('一共有'+a.length+'个用户');

var users=document.getElementById('users');

var ul=users.getElementsByTagName('ul')[0];

var li=document.createElement("li");

li.className='user';

ul.appendChild(li);

var img=document.createElement("img");

img.src='2.jpg';

li.appendChild(img);

var a=document.createElement("a");

a.href='/user/2';

a.innerText="pig";

li.appendChild(a);