使用过 jQuery 的人清楚,一个选择器就够了,需要什么选什么,但是其内部封装的方法实际是 DOM 操作,利用 JavaScript 中的方法来操作 HTML 标签等信息。本文介绍一些基础的获取节点信息的操作。
节点的类型
文档有几种类型,文档节点、元素节点、文本节点、属性节点、注释节点,每种节点的类型见下图:
获取节点方法
HTML 内容
<html> <head> <meta charset="utf-8"> <title>js lession</title> </head> <body> <h2>DOM 操作</h2> <input type="text" id="nickname" name="username" value="我与梦想有个约会"> <input type="text" id="username" name="username" value="nmgwddj"> <input type="text" id="password" name="password" value="jiajia.deng"> <input type="text" id="email" name="email" value="nmgwddj@gmail.com"> <div class="">Hello Div</div> <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> </html>
JavaScript 内容
// 通过 id 查找对象 var name = document.getElementById("username"); console.log(name); var arr = document.getElementsByTagName("input"); console.log(arr); console.log(arr[0]); console.log(arr.item(0)); var byname = document.getElementsByName("username"); console.log(byname); // NodeList 集合 console.log(byname[0]); // 集合中单个元素 console.log(byname.item(1));// 同上方法 // 获取文本节点 var div = document.getElementsByTagName("div")[0]; console.log(div); console.log(div.firstChild); // 还有 lastChild console.log(div.firstChild.nodeValue); // 文本节点的内容 // 获取子节点和兄弟节点 var ull = document.getElementsByTagName("ul")[0]; console.log(ull.childNodes.length); // 内部元素个数,包含空白的节点信息 console.log(ull.childNodes); var sh = document.getElementsByTagName("li")[1]; // 上海的 li console.log(sh.nextSibling.nextSibling); // 下一个是空白节点,再下一个才是 li // 获取父节点 var bj = document.getElementsByTagName("li")[2]; console.log(bj.parentNode); // ul console.log(bj.parentNode.parentNode); // body console.log(bj.parentNode.parentNode.parentNode); // html console.log(bj.parentNode.parentNode.parentNode.parentNode); // document