【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

公众号-归子莫，小程序-小归博客