拥有DOM力量的你究竟可以干什么

如果你希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始！

查找HTML元素

document.getElementById(id)

通过元素 id 来查找元素


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<div id="myDiv">Hello, world!div>
 
<script>
  var myDiv = document.getElementById("myDiv");
  console.log(myDiv);  // 输出 Hello, world!
script>
body>
html>

document.getElementsByTagName(name)

通过标签名来查找元素

这个方法接收一个参数 name，该参数是一个字符串，表示你想要选择的元素的标签名称


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<p>一段话p>
<p>一段话1p>
<p>一段话2p>
 
<script>
  var p = document.getElementsByTagName("p");
  console.log(p);
  console.log(p[1]);
script>
body>
html>

返回的 NodeList 对象是一个“类数组”，可以像数组一样使用。你可以通过索引访问特定的元素，例如，document.getElementsByTagName("p")[0] 将返回第一个

元素

需要注意的是，NodeList 是“静态的”，也就是说，它并不会反映后续对文档的修改。如果在后续对文档进行了修改（例如，添加或删除了元素），那么你需要再次调用 getElementsByTagName 来获取最新的元素（查找HTML元素的方法的性质都类似，类比即可！）

document.getElementsByClassName(name)

通过类名来查找元素


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<button class="btn">我是按钮button>
 
<script>
    var btn = document.getElementsByClassName("btn");
    console.log(btn);
script>
body>
html>

document.querySelector(CSS选择器)

通过CSS选择器选择一个元素


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<button class="btn">我是按钮button>
 
<script>
    var btn = document.querySelector(".btn");
    console.log(btn);
script>
body>
html>

document.querySelectorAll(CSS选择器)

通过CSS选择器选择多个元素


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<ul class="list">
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
    <li>列表项4li>
ul>
 
<script>
    var list = document.querySelectorAll(".list li");
    console.log(list);
script>
body>
html>

获取HTML元素的值

元素节点.innerText	获取 HTML元素的 inner Text
元素节点.innerHTIML	获取 HTML元素的 inner HTML
元素节点.属性	获取 HTIML 元素的属性值
元素节点getAttribute(attribute)	获取 HTIML 元素的属性值
元素节点style.样式	获取 HTML 元素的行内样式值


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<a ID="a" href="https://www.csdn.net/">CSDNa>
 
<script>
  var a = document.getElementById("a");
  console.log(a.innerText);
script>
body>
html>


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="box">
    <h1>我是Box中的大标题h1>
div>
 
<script>
    var box = document.getElementById("box");
    console.log(box.innerHTML);
script>
body>
html>


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<a ID="a" href="https://www.csdn.net/">CSDNa>
 
<script>
  var a = document.getElementById("a");
  console.log(a.href);
  console.log(a.getAttribute("href");
  console.log(a.getAttribute(""));
script>
body>
html>


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box">div>
 
<script>
  var box = document.getElementById("box");
  console.log(box.style.width);
script>
body>
html>

小知识：

如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉-，然后将 - 后的字母大写，我们通过style属性设置的样式都是行内样式，同样的获取也是行内样式，而行内样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

改变HTML的值

元素节点.innerText = new text content	改变元素的 inner Text
元素节点.innerHTML = new html content	改变元素的 inner HTML
元素节点.属性 = new value	改变 HTML 元素的属性值
元素节点.setAttribute(attribute, value)	改变 HTML 元素的属性值
元素节点.style.样式 = new style	改变 HTML 元素的行内样式值


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<button id="btn">我是按钮button>
 
<script>
    var btn = document.getElementById("btn");
    btn.innerText = "我是JavaScript的按钮";
    console.log(btn);
script>
body>
html>


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="box">div>
 
<script>
    var box = document.getElementById("box");
    box.innerHTML = "我是Box中的大标题
";
    console.log(box);
script>
body>
html>


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<a id="a" href="">打开百度，你就知道！a>
 
<script>
    var a = document.getElementById("a");
    a.href="https://www.baidu.com";
    console.log(a);
script>
body>
html>


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box">div>
 
<script>
    var box = document.getElementById("box");
    box.style.background = "green";
    console.log(box);
script>
body>
html>


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box">div>
 
<script>
  var box = document.getElementById("box");
  box.style.background = "green";
  console.log(box);
script>
body>
html>

添加HTML元素

document.createElement(element)	创建 HTML 元素节点
document.createAttribute(attribute)	创建 HTML 属性节点
document.createTextNode(text)	创建 HTML 文本节点
元素节点.removeChild(element)	删除 HTML 元素
元素节点.appendChild(element)	添加 HTML 元素
元素节点.replaceChild(element)	替换 HTML 元素
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点

创建不代表是添加到网页上了！！！


html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
 
<script>
  var a = document.createElement("a");
  a.href = "https://www.csdn.net";  // 设置链接地址
  var text = document.createTextNode("CSDN");
  a.appendChild(text);  // 将链接文本添加到链接元素中
  document.getElementsByTagName("body")[0].appendChild(a);
 
 
  var ul = document.createElement("ul");
 
 
 
  var li1 = document.createElement("li");
  var text1 = document.createTextNode("列表项1");
  li1.appendChild(text1);
  ul.appendChild(li1);
 
  var li2 = document.createElement("li");
  var text2 = document.createTextNode("列表项2");
  li2.appendChild(text2);
  ul.appendChild(li2);
 
  var li3 = document.createElement("li");
  var text3 = document.createTextNode("列表项3");
  li3.appendChild(text3);
  ul.appendChild(li3);
 
  var li4 = document.createElement("li");
  var text4 = document.createTextNode("列表项4");
  li4.appendChild(text4);
  ul.appendChild(li4);
 
  var li5 = document.createElement("li");
  var text5 = document.createTextNode("列表项5");
  li5.appendChild(text5);
  ul.appendChild(li5);
 
  document.getElementsByTagName("body")[0].appendChild(ul);
script>
body>
html>

创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<ul id="ul">
    <li id="first">列表项1li>
    <li>列表项2li>
    <li>列表项3li>
    <li id="last">列表项4li>
ul>
 
<script>
    var ul = document.getElementById("ul");
    var first = document.getElementById("first");
    var last = document.getElementById("last");
 
    /*删除第一个*/
    ul.removeChild(first);
 
    /*替换最后一个*/
    var replaceLi = document.createElement("li");
    replaceLi.innerHTML = "列表4的替换";
    ul.replaceChild(replaceLi, last);
script>
body>
html>

查找HTML父子元素节点

元素节点.parentNode	返回元素的父节点
元素节点.parentElement	返回元素的父元素
元素节点.childNodes	返回元素的一个子节点的数组（包含空白文本Text节点）
元素节点.children	返回元素的一个子元素的集合（不包含空白文本Text节点）
元素节点.firstChild	返回元素的第一个子节点（包含空白文本Text节点）
元素节点.firstElementChild	返回元素的第一个子元素（不包含空白文本Text节点）
元素节点.lastChild	返回元素的最后一个子节点（包含空白文本Text节点）
元素节点.lastElementChild	返回元素的最后一个子元素（不包含空白文本Text节点）
元素节点.previousSibling	返回某个元素紧接之前节点（包含空白文本Text节点）
元素节点.previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
元素节点.nextSibling	返回某个元素紧接之后节点（包含空白文本Text节点）
元素节点.nextElementSibling	返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）

相关阅读:
【JavaScript】Generator函数
 一文带大家，彻底了解【NAT技术-网络地址转换】
Python获取Window系统注册表安装的软件，再卸载软件
 使用 shell 脚本拼接 srt 字幕文件 (srtcat)
18-1、k8s 对外服务之ingress
【翻译】Seastar 教程（一）
CISSP学习笔记：管理安全运营
 CentOS 7.2 配置mysql5.7
Doris写入数据异常提示actual column number in csv file is less than schema column number
golang有序map
原文地址：https://blog.csdn.net/m0_62407354/article/details/134088490