使用过 jQuery 的人清楚，一个选择器就够了，需要什么选什么，但是其内部封装的方法实际是 DOM 操作，利用 JavaScript 中的方法来操作 HTML 标签等信息。本文介绍一些基础的获取节点信息的操作。
节点的类型
文档有几种类型，文档节点、元素节点、文本节点、属性节点、注释节点，每种节点的类型见下图： 
获取节点方法
HTML 内容
DOM 操作
- 北京
- 上海
- 广州
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
效果
