使用过 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
效果
