共计 5342 个字符，预计需要花费 14 分钟才能阅读完成。
【JavaScript 实用技巧（二）】Js 操作 DOM（由问题引发的文章改版，新人大佬都可）
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
阐明
这片文章的起源是更改之前的一个笔记，是获取 js 获取 input 标签的值，过后只是讲了这个例子，当然上面这个例子仍然保留，毕竟要在乎老用户的感触，属于增量需要。
由过后的一个例子看来，须要总结或者说学习的点还是比拟多的。
新人可能只想解决某个问题，而大佬麻烦看看总结的还有哪里须要补充阐明的。
js 获取 input 标签外面的值
需要
有的时候咱们须要取得在 input 外面的一些值，比方在发送手机验证码的时候，首先在 html 外面写以下的代码
代码
html 一个简略的 input 标签
<input type="text" name="name" id="phone" /> js 获取 input 标签的值
var phone = document.getElementById("phone").value;阐明
看下面的代码，就是应用的 DOM 的 API 获取到 input 标签的值。既然能够获取到，那么 DOM 也提供了相应更改或者说替换的 API，而 DOM 是能够在 JS 中执行的，那么 JS 和 HTML 的交互就来了。
一次勾结上，那当前的花色还能少？
所以各种模版引擎，响应式，JS 动画那不就络绎不绝了。
是不是感觉浅近的货色就要来了，不急，回到主题，本章次要讲 JS 操作 DOM。
JS 的能力
在讲 JS 操作 DOM 的时候，感觉有必要先讲一下 JS 的能力。
上面是对象的 HTML DOM 树，图来自 W3C，https://www.w3school.com.cn/j…
通过这个对象模型，JavaScript 取得创立动静 HTML 的所有力量：
- JavaScript 能扭转页面中的所有 HTML 元素
- JavaScript 能扭转页面中的所有 HTML 属性
- JavaScript 能扭转页面中的所有 CSS 款式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能增加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创立新的 HTML 事件
看到下面的内容，感觉就是会用 js，你啥都能做，啥都能改。这种别被产品看到了，不然有些需要你顶不死，推不下。
DOM 的理解
既然是 JS 操作 DOM，那么首先是须要相熟 DOM，正好后面写了一篇对于 DOM 的文章，【浏览器】聊聊 DOM
操作 DOM 的罕用办法
| 办法 | 形容 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回蕴含带有指定标签名称的所有元素的节点列表（汇合 / 节点数组）。 |
| getElementsByClassName() | 返回蕴含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点增加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点后面插入新的子节点。 |
| createAttribute() | 创立属性节点。 |
| createElement() | 创立元素节点。 |
| createTextNode() | 创立文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或批改为指定的值。 |
获取 DOM 的节点
getElementsByTagName()：依据元素名称获取元素对象们。返回值是一个数组。
getElementsByClassName()：依据 Class 属性值获取元素对象们。返回值是一个数组。
getElementsByName()：依据 name 属性值获取元素对象们。返回值是一个数组。
获取 Element（节点）的办法最常见的就是以上的四种
getElementById()
依据 id 属性值获取元素对象。id 属性值个别惟一。
如果须要查找文档中的一个特定的元素，最无效的办法是 getElementById()，在操作文档的一个特定的元素时，最好给该元素一个 id 属性（不然你认为为什么叫 ById），为它指定一个（在文档中）惟一的名称，而后就能够用该 ID 查找想要的元素。
示例：
<html>
<head>
<script type="text/javascript">
function getValue(){var x = document.getElementById("test")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="test" onclick="getValue()"> 我的 </h1>
<p> 点击我的，看看成果 </p>
</body>
</html>成果：
代码解析：
通过 getElementById 获取元素 id 为 test 的节点，而后打印 test 节点的文本。
下图就是获取的 html 节点
getElementsByClassName()
getElementsByClassName() 办法返回文档中所有指定类名的元素汇合，作为 NodeList 对象。
NodeList 对象代表一个有程序的节点列表。NodeList 对象 咱们可通过节点列表中的节点索引号来拜访列表中的节点 (索引号由 0 开始)。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 测试 </title>
<style>
.example {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="example">
<p> 我是第一个 </p>
</div>
<div class="example color">
<p> 我是第二个 </p>
</div>
<div class="example color">
<p> 我是第三个 </p>
</div>
<button onclick="myFunction()"> 点我看成果 </button>
<script>
function myFunction() {var x = document.getElementsByClassName("color");
x[0].style.backgroundColor = "red";
console.log(x)
}
</script>
</body>
</html>成果：
代码解析：
通过 getElementsByClassName 获取到 class 属性为“color”的对象，后果值 NodeList 对象，示意指定类名的元素汇合。元素在汇合中的程序以其在代码中的呈现秩序排序。给第一个设置背景色彩为红色。
留神: Internet Explorer 8 及更早 IE 版本不反对 getElementsByClassName() 办法
插入 DOM 节点
插入节点有两种形式，它们的含意是不同的。
appendChild()
父节点的最初插入一个新的子节点。
父节点.appendChild(新的子节点);insertBefore()
- 在参考节点前插入一个新的节点。
- 如果参考节点为 null，那么他将在父节点最初插入一个子节点。
父节点.insertBefore(新的子节点, 作为参考的子节点);示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id="list">
<li> 第一 </li>
<li> 第二 </li>
</ul>
<p id="demo"> 单击按钮将我的项目增加到列表中 </p>
<button onclick="myFunction1()"> 点我，前面新增 </button>
<button onclick="myFunction2()"> 点我，后面新增 </button>
<script>
function myFunction1(){var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
}
function myFunction2(){var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
var list = document.getElementById("list")
list.insertBefore(node, list.childNodes[0]);
}
</script>
</body>
</html>成果：
删除节点
removeChild()
必须要指定是删除哪个子节点
父节点.removeChild(子节点);如果须要删除节点自身
node.parentNode.removeChild(node);示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id="list">
<li> 第一 </li>
<li> 第二 </li>
</ul>
<p id="demo"> 单击按钮将我的项目增加到列表中 </p>
<button onclick="myFunction1()"> 点我，前面新增 </button>
<button onclick="myFunction2()"> 点我，后面新增 </button>
<button onclick="myFunction3()"> 点我，删除第一个节点 </button>
<script>
function myFunction1(){var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
}
function myFunction2(){var node = document.createElement("LI");
var textnode = document.createTextNode("我是新加的");
node.appendChild(textnode);
var list = document.getElementById("list")
list.insertBefore(node, list.childNodes[0]);
}
function myFunction3(){var list = document.getElementById("list")
list.removeChild(list.childNodes[0]);
}
</script>
</body>
</html>成果：
复制节点（克隆节点）
cloneNode()
克隆节点
要复制的节点.cloneNode();
要复制的节点.cloneNode(true);括号里带不带参数，成果是不同的。
- 不带参数 / 带参数 false：只复制节点自身，不复制子节点。
- 带参数 true：既复制节点自身，也复制其所有的子节点。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id="list">
<li> 第一 </li>
<li> 第二 </li>
</ul>
<button onclick="myFunction()"> 点我，克隆节点 </button>
<script>
function myFunction(){var itm = document.getElementById("list");
var cln = itm.cloneNode(true);
document.getElementById("list").appendChild(cln);
}
</script>
</body>
</html>成果：
设置节点的属性
次要也是获取，批改和删除
获取节点的属性值
元素节点. 属性;
元素节点 [属性];
节点.getAttribute("属性名称");前者是间接操作标签，后者是把标签作为 DOM 节点。
设置节点的属性值
myNode.src = "xxxx" // 批改 src 的属性值
myNode.className = "xxxx"; // 批改 class 的 name
元素节点.setAttribute(属性名, 新的属性值);前者是间接操作标签，后者是把标签作为 DOM 节点。
删除节点的属性
元素节点.removeAttribute(属性名);总结
举荐应用 DOM 节点，不要间接操作标签。
感激
万能的网络
菜鸟教程
以及勤奋的本人，集体博客，GitHub 测试，GitHub
公众号 - 归子莫，小程序 - 小归博客
