乐趣区

关于前端:JavaScript实用技巧二Js操作DOM由问题引发的文章改版新人大佬都可

jiezi

【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

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

退出移动版