通過 JavaScript，您可以重構整個HTML文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript就需要對HTML文檔中所有元素進行訪問的入口。這個入口，連同對HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
- 整個文檔是一個文檔節點
- 每個 HTML 標簽是一個元素節點
- 包含在 HTML 元素中的文本是文本節點
- 每一個 HTML 屬性是一個屬性節點
- 注釋屬於注釋節點
原生方式
1、獲取
getElementById()、getElementsByTagName()、getElementsByName（）、getAttribute（）、setAttribute（）、removeAttribute（）
jQuery方式
一、節點的操作
1.查找節點：
var $var_1=$("htmltype"); //這句話就是獲取所有htmltype節點
如：var $ul_1=$("ul");
2.創建並追加節點：
var $var_1=$("<htmltype>");//這句話是創建一個節點
$("htmltype2").append($var_1) ; //這句話是把節點插入所有htmltype2節點中
例子：var $li_1=$("<li title="title1">香蕉</li>");
$("ul").append($li_1);
其中插入方法有以下幾種：
- append() 把B追加到A內部（所有的A元素，以下類似）
- appendTo() 把A追加到B內部
- prepend() 把B追加到A內部的內容前
- prependTo() 把A追加到B的內容前
- after() 在A后追加B
- insertAfter() 在A前追加B
- before() 在A前追加B
- insertBefore()在A后追加B
例子：$("ul").append("<li>你好</li>");//在ul內部追加li
$("<li>你好</li>").appendTo("ul");//在ul內部追加li
3.刪除節點
- remove() 刪除該元素
- empty() 清空節點，包括后代節點
例子：$("ul li:eq[1]").remove(); //獲取ul中的第二個li並刪除
$("ul li").remove(“li[title="菠蘿"]”);//刪除ul中li元素屬性title="菠蘿"的元素
4.復制節點
- clone();//復制本節點
例子：$("ul li:eq[1]").clone().appenTo("ul");//復制並追加到ul中，只復制是不會顯示出來的
5.替換節點
- replaceWith();//將B替換所有A
- replaceAll();//將A替換所有B
6.包裹節點
- warpAll();//用B包裹A
- warpInner();//用B包裹A的內容
二.屬性操作
1.獲取和設置屬性
var $var_1=$("p");//這句話是獲取節點P
var $p_1=$var_1.attr("title");//獲取節點P的title屬性
var $p_2=$var_1.attr("title","你好");//設置節點P的title屬性為"你好"
2.刪除屬性
$("p").removeAttr("title");//刪除節點P的Title屬性
三.樣式操作
1.獲取和設置樣式
var $var_class=$("p").attr("class");//獲取節點P的class屬性
$("p").attr("class","class1");設置節點P的class屬性為樣式表類class1
2.追加樣式
- addClass() 添加樣式到A
例子：$("p").addClass("another");添加樣式表類another類到P
3.移除樣式
- removeClass() 移除類
4.切換樣式
- toggleClass() 切換clss屬性類為新的類
5.判斷某個樣式是否存在
- hasClass()
四.內容的操作
- html() 該方法獲取html元素的內容，如：var var1=$("p").html();//獲取P元素內的內容
- text() 獲取或設置某個html元素的內容
- val() 獲取元素的Value值
- children() 獲取html元素的所有子節點
- next() 獲取html元素后緊鄰的同輩節點
- prev() 獲取html元素前緊鄰的同輩節點
- siblings() 獲取html元素前后緊鄰的同輩節點
五.CSS-DOM技術
- css("屬性"，"值") 設置元素css某個屬性的值，如：$("p").css("color","red");//設置P的css屬性{color:red;}