JavaScript DOM 基本操作,查找节点信息

使用过 jQuery 的人清楚,一个选择器就够了,需要什么选什么,但是其内部封装的方法实际是 DOM 操作,利用 JavaScript 中的方法来操作 HTML 标签等信息。本文介绍一些基础的获取节点信息的操作。

节点的类型

文档有几种类型,文档节点、元素节点、文本节点、属性节点、注释节点,每种节点的类型见下图:

Screen Shot 2015-11-08 at 8.09.17 PM

获取节点方法

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

效果

Screen Shot 2015-11-08 at 8.21.12 PM

评论