【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/js/js_htmldom.asp
通过这个对象模型,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节点,不要直接操作标签。
感谢
万能的网络
公众号-归子莫,小程序-小归博客