节点操作 · 前端基础知识

# 节点操作 - 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内容) - 内存泄漏 - 安全问题建议仅用于新节点