一，關系

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

DOM【document object，model】

關系圖

DOM描述了處理網頁內容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口。

二，DOM html（DOM樹）

節(jié)點遍歷：

node.parentNode

node.firstChild

node.lastChild

node.previousSibling

node.nextSibling .. ?

元素遍歷：

p.firstElementChild

p.lastElementChild..

三，節(jié)點操作

1.獲取節(jié)點--可維護性差

父子關系：parentNode

兄弟關系：previousSibling／previousElementSibling

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

ById只能用document調用，并且返回值是唯一的，不可以動態(tài)集合。

ByTagName可以動態(tài)集合。

ByClassName可以動態(tài)集合，

Selector 返回值唯一，不可以動態(tài)集合。

2.一系列：

創(chuàng)建節(jié)點：element=document.creatElement(TagName)

修改節(jié)點：element.text節(jié)點其后代節(jié)點的文本內容。

? ? ? ? ? ? ? ? ? ?element.innerText="";

? ? ? ? ? ? ? ? ? ?IE9以下：user_last.textContent="要替換的內容"；

---

插入節(jié)點：var child=element.appendChild(achild);

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

---

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

刪除節(jié)點：child=element.removeChild(child);child.parentNode.remove(child);

創(chuàng)建+插入：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);