節點操作 · 前端基礎知識

# 節點操作 - getElementById - getElementsByClassName - getElementsByTagName - querySelector(All) - createElement - innerText - appendChild - insertBefore - removeChild - innerHTML ## 獲取節點通過dom樹獲取節點（可維護性差） - 父子關系 - parentNode - firstChild/lastChild/childNodes - 兄弟關系 - previousSibling/nextSibling - previousElementSibling/nextElementSibling 通過接口獲取節點 - element = document.getElementById - collection = element.getElementsByTagName - collection = document.getElementsByClassName - list = elementquerySelector(All) collection is live(獲取的集合是動態的) list is not live(獲取的列表不是動態的) ``` javascript <body> <div id="users"> <h2>8882人在學習該課程:</h2> <ul> <li class="user"> <a href="/user/1">Satoshi</a> </li> <li class="user"> <a href="/user/2">春來草青</a> </li> <li id="lastUser" class="user last"> <a href="/user/3">Kash</a> </li> </ul> </div> <script> var users = document.getElementById('users'); var a = users.getElementsByTagName('li'); alert('一共有' + a.length + '個用戶!'); var lastUser = document.getElementById('lastUser'); lastUser.parentNode.removeChild(lastUser); alert('一共有' + a.length + '個用戶!'); </script> </body> ``` | name | only document | sole| live| | -------- | --------| --------| --------| | getElementById| Y| Y | | | | getEmementsByTagName | | | Y| | getElementsByClassName | | | Y| | querySelectorAll| | | | | querySelector| | Y| | ## 創建節點 element = document.createElement(tagName) ## 修改節點 element.textContent(節點及其后代節點的文本內容) element.innerText(節點及其后代節點的文本內容,ff不支持, 不是標準規范) ## 插入節點 var achild = dlement.appendChild(achild) var achild = dlement.insertBefore(achild, referenceChild) ## 刪除節點 child = element.removeChild(child) ## innerHtml element.innerHTML(節點的HTML內容) - 內存泄漏 - 安全問題建議僅用于新節點