获取 DOM

1
2
3
4
5
6
7
8
<div id="id">testID</div>
<div class="className">testClass</div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
<input type="text" name="name" />
1
2
3
4
document.getElementById("id"); // 通过ID获取，返回对象
document.getElementsByClassName("className"); // 通过className，返回数组形式
document.getElementsByTagName("ul"); // 通过标签名获取，返回数组形式
document.getElementsByName("name"); // 通过name获取，返回数组形式

获取子节点

通过 childNodes 获取子节点

使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
2
document.getElementsByTagName("ul")[0].childNodes;
// 获取子元素，返回数组形式

通过 children 来获取子节点(推荐)

利用 children 来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
2
document.getElementsByTagName("ul")[0].children;
// 获取子元素，返回数组形式

获取第一个子节点

1.firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？？其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。

2.使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
2
3
document.getElementsByTagName("ul")[0].firstChild;
document.getElementsByTagName("ul")[0].firstElementChild;
// 获取第一个子元素

获取最后一个子节点

lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
2
3
document.getElementsByTagName("ul")[0].lastChild;
document.getElementsByTagName("ul")[0].lastElementChild;
// 获取最后一个子元素

获取父节点

parentNode 获取父节点(推荐)

获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
document.getElementsByTagName("li")[0].parentNode;

parentElement 获取父节点

parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
document.getElementsByTagName("li")[0].parentElement;

offsetParent 获取所有父节点

一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
document.getElementsByTagName("li")[0].offsetParent;

获取兄弟节点

通过获取父亲节点再获取子节点来获取兄弟节点

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
document.getElementsByTagName("li")[0].parentNode.children[1];

获取上一个兄弟节点

在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling(推荐) 则直接匹配节点。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
2
document.getElementsByTagName("li")[0].previousElementSibling;
document.getElementsByTagName("li")[0].previousSibling;

获取下一个兄弟节点

同 previousSibling 和 previousElementSibling，nextSibling 和 nextElementSibling 也是类似的。

1
2
3
4
5
<ul>
  <li>1</li>
  <li>2</li>
  <li>2</li>
</ul>
1
2
document.getElementsByTagName("li")[0].nextElementSibling;
document.getElementsByTagName("li")[0].nextSibling;

更换 DOM 内容

替换内容

1
<div id="id">这是原本内容</div>
1
2
3
4
5
// HTML包含html标签解析，Text为字符串类型，inner替换元素内部内容，outer替换包含元素本身的内容
document.getElementById("id").innerHTML = "<div>这是替换内容</div>";
document.getElementById("id").innerText = "<div>这是替换内容</div>";
document.getElementById("id").outerHTML = "<div>这是替换内容</div>";
document.getElementById("id").outerText = "<div>这是替换内容</div>";

添加内容

1.通过创建 DOM 或获取已有 DOM 方式（appendChild、insertBefore）

1
2
<div id="id"></div>
<div id="div"></div>
1
2
3
4
5
let div = document.getElementById("div");
// 把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
document.getElementById("id").appendChild(div);
// 把要插入的节点添加到指定父级里面的指定节点之前
document.getElementById("id").insertBefore(div);

或

1
2
3
4
5
6
let div = document.createElement("div");
div.innerHTML = "<p>Test</p>";
// 把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
document.getElementById("id").appendChild(div);
// 把要插入的节点添加到指定父级里面的指定节点之前
document.getElementById("id").insertBefore(div);

2.通过 string 字符类型添加（beforeBegin、afterBegin、beforeEnd、afterEnd）

1
<div id="id"><p>这是子元素</p></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 追加到当前节点前面
document
  .getElementById("id")
  .insertAdjacentHTML("beforeBegin", "<div>beforeBegin</div>");
// 追加到当前节点子节点最前面
document
  .getElementById("id")
  .insertAdjacentHTML("afterBegin", "<div>afterBegin</div>");
// 追加到当前节点子节点最后面
document
  .getElementById("id")
  .insertAdjacentHTML("beforeEnd", "<div>beforeEnd</div>");
// 追加到当前节点后面
document
  .getElementById("id")
  .insertAdjacentHTML("afterEnd", "<div>afterEnd</div>");

删除内容

1
<div id="id"></div>
1
document.getElementById("id").remove();

更换 DOM 样式

1
<div id="id" class="myclass"></div>
1
2
3
4
5
6
7
8
// 添加class
document.getElementById("id").classList.add("className");
// 移除class
document.getElementById("id").classList.remove("className");
// 替换class
document.getElementById("id").className = "className";
// 设置样式
document.getElementById("id").style.width = "20px";

获取 DOM 属性

1
2
<div id="id" data-value="test"></div>
<img id="img" src="../1.png" alt="这是图片" />
1
2
3
document.getElementById("id").getAttribute("data-value");
document.getElementById("img").getAttribute("src");
document.getElementById("img").getAttribute("alt");