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

我与梦想有个约会

发布于 2023-10-20 19:51:04

1750

发布于 2023-10-20 19:51:04

文章被收录于专栏：jiajia_dengjiajia_deng

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

节点的类型

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

获取节点方法

HTML 内容

js lession

DOM 操作

Hello Div

北京
上海
广州

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