找到對象：
document.getElementById()：返回對擁有指定 id 的第一個對象的引用。
document.getElementsByName()：返回帶有指定名稱的對象集合。
document.getElementsByTagName()：返回帶有指定標簽名的對象集合。
document.getElementsByClassName()：返回對擁有指定 class 的對象集合。
操作對象：
操作屬性：
取值：getAttribte()；
document.getElementsByTagName("標簽名")[0].getAttribute("屬性名");
賦值：setAttribte()；
document.getElementsByTagName("標簽名")[0].setAttribute("屬性名","屬性值");
刪除賦值：removeAttribute()；
document.getElementsByTagName("標簽名")[0].removeAttribute("屬性名");
操作樣式：
內聯樣式：style.xxxx；
class：
1.className。
2.把class當成屬性來看
element.className = 'blue';
操作內容：
表單元素：value；
document.getElementById("id名字").value;
文本框，單選框，復選框。
非表單元素：
innerHTML：
document.getElementById("id名字").innerHTML="<a href='https://www.baidu.com'>到百度</a> ";
瀏覽器會將inneHTML后面的內容作為html來解析。
innerText：
document.getElementById("id名字").innerText="<a href='https://www.sina.com'>到新浪</a> ";
瀏覽器會將innerText后面的內容作為純文本來解析。
操作節點：
什么是節點：
1、整個文檔時一個文檔節點。
2、每個HTML元素是元素節點。
3、HTML元素內的文本是文本節點。
4、每個HTML屬性是屬性節點。
5、每個注釋是注釋節點。
所以HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱為節點樹。通過 HTML DOM，節點樹中的所有節點都可以通過 JS 進行訪問。所有 HTML 元素（節點）均可被修改。
創建節點、追加節點：
createElement（標簽名）創建一個元素節點（具體的一個元素）；
appendChild（節點）追加一個節點。
createTextNode（節點文本內容）創建一個文本節點。
例子：
<body> <div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("這是一個新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>
刪除、移除節點:
removeChild(節點) 刪除一個節點，用於移除刪除一個參數（節點）。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了
var removeChild = document.body.removeChild(div1);//移除document對象的方法div1
替換節點:
replaceChild(插入的節點，被替換的節點) ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。
var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2
查找節點:
childNodes 包含文本節點和元素節點的子節點:
for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的對象。 //nodeType是節點的類型，利用nodeType來判斷節點類型，再去控制子節點 //nodeType==1 是元素節點 //nodeType==3 是文本節點 if (oList.childNodes[i].nodeType == 1) {//查找到oList內的元素節點 console.log(oList.childNodes[i]);//在控制器日志中顯示找到的元素節點 } }
children也可以獲取子節點，而且兼容各種瀏覽器:
console.log(oList.children);//在控制器日志中顯示oList子節點
parentNode：獲取父節點:
var oList = document.getElementById('list');//oList是做的ul的對象 var oChild=document.getElementById('child');//oChild是做的ul中的一個li的對象 //通過子節點查找父節點//parentNode：獲取父節點 console.log(oChild.parentNode);//在控制器日志中顯示父節點 console.log(oList.children);//在控制器日志中顯
nextSibling；查找下一個兄弟節點
previousSibling：查找上一個兄弟節點
對元素節點的所有操作：
element.accessKey 設置或返回元素的快捷鍵。 element.appendChild() 向元素添加新的子節點，作為最后一個子節點。 element.attributes 返回元素屬性的 NamedNodeMap。 element.childNodes 返回元素子節點的 NodeList。 element.className 設置或返回元素的 class 屬性。 element.clientHeight 返回元素的可見高度。 element.clientWidth 返回元素的可見寬度。 element.cloneNode() 克隆元素。 element.compareDocumentPosition() 比較兩個元素的文檔位置。 element.contentEditable 設置或返回元素的文本方向。 element.dir 設置或返回元素的內容是否可編輯。 element.firstChild 返回元素的首個子。 element.getAttribute() 返回元素節點的指定屬性值。 element.getAttributeNode() 返回指定的屬性節點。 element.getElementsByTagName() 返回擁有指定標簽名的所有子元素的集合。 element.getFeature() 返回實現了指定特性的 API 的某個對象。 element.getUserData() 返回關聯元素上鍵的對象。 element.hasAttribute() 如果元素擁有指定屬性，則返回true，否則返回 false。 element.hasAttributes() 如果元素擁有屬性，則返回 true，否則返回 false。 element.hasChildNodes() 如果元素擁有子節點，則返回 true，否則 false。 element.id 設置或返回元素的 id。 element.innerHTML 設置或返回元素的內容。 element.insertBefore() 在指定的已有的子節點之前插入新節點。 element.isContentEditable 設置或返回元素的內容。 element.isDefaultNamespace() 如果指定的 namespaceURI 是默認的，則返回 true，否則返回 false。 element.isEqualNode() 檢查兩個元素是否相等。 element.isSameNode() 檢查兩個元素是否是相同的節點。 element.isSupported() 如果元素支持指定特性，則返回 true。 element.lang 設置或返回元素的語言代碼。 element.lastChild 返回元素的最后一個子元素。 element.namespaceURI 返回元素的 namespace URI。 element.nextSibling 返回位於相同節點樹層級的下一個節點。 element.nodeName 返回元素的名稱。 element.nodeType 返回元素的節點類型。 element.nodeValue 設置或返回元素值。 element.normalize() 合並元素中相鄰的文本節點，並移除空的文本節點。 element.offsetHeight 返回元素的高度。 element.offsetWidth 返回元素的寬度。 element.offsetLeft 返回元素的水平偏移位置。 element.offsetParent 返回元素的偏移容器。 element.offsetTop 返回元素的垂直偏移位置。 element.ownerDocument 返回元素的根元素（文檔對象）。 element.parentNode 返回元素的父節點。 element.previousSibling 返回位於相同節點樹層級的前一個元素。 element.removeAttribute() 從元素中移除指定屬性。 element.removeAttributeNode() 移除指定的屬性節點，並返回被移除的節點。 element.removeChild() 從元素中移除子節點。 element.replaceChild() 替換元素中的子節點。 element.scrollHeight 返回元素的整體高度。 element.scrollLeft 返回元素左邊緣與視圖之間的距離。 element.scrollTop 返回元素上邊緣與視圖之間的距離。 element.scrollWidth 返回元素的整體寬度。 element.setAttribute() 把指定屬性設置或更改為指定值。 element.setAttributeNode() 設置或更改指定屬性節點。 element.setIdAttribute() element.setIdAttributeNode() element.setUserData() 把對象關聯到元素上的鍵。 element.style 設置或返回元素的 style 屬性。 element.tabIndex 設置或返回元素的 tab 鍵控制次序。 element.tagName 返回元素的標簽名。 element.textContent 設置或返回節點及其后代的文