https://blog.csdn.net/fengwei4618/article/details/78025522
DOM 的作用
获取DOM是为了将来用js动态操作它。
DOM介绍
DOM的组成部分介绍：文档、对象和模型
Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。
Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。
Model(模型)：DOM将整个文档划分成节点树结构，如下：
节点种类
<div id="box1">测试div</div>
元素节点：其实就是标签<div></div>
属性节点：其实就是标签的属性 id="box1"
文本节点:标签里夹的文本 测试div
元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//node-节点为元素节点类型,nodeType=1 nodeName 为实际标签名 nodeValue值为null
var box=document.getElementById("box");
alert("节点类型："+box.nodeType); //1
alert("节点名称："+box.nodeName); //div
alert("节点值："+box.nodeValue); //null
</script>
</head>
<body>
<div id="box">测试div</div>
</body>
</html>
上面的代码不会弹出窗口。为什么
因为DOM操作必须等待HTML文档加载完毕才可以获取。顺序执行时还没有获取到
方案一：把代码放在最下面
方案二：把代码写到window.onload事件里。等页面加载完毕再执行
window.onload=function(){
//你的js代码
}
改写成这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
//node-节点为元素节点类型,nodeType=1 nodeName 为实际标签名 nodeValue值为null
var box=document.getElementById("box");
alert("节点类型："+box.nodeType); //1
alert("节点名称："+box.nodeName); //div
alert("节点值："+box.nodeValue); //null
}
</script>
</head>
<body>
<div id="box">测试div</div>
</body>
</html>
## DOM获取元素节点的方法 ##
getElementById() 一个对象
getElementsByName() 对象集合 name
getElementsByClassName() 对象集合 通过类名
getElementsByTagName() 对象集合 标签名
getAttribute()
setAttribute()
removeAttribute()
### getElementsByName() ##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(){
var cs=document.getElementsByName("testName");
for(var i=0;i<cs.length;i++){
alert(cs[i].name);//testName
alert(cs[i].nodeName);//input
alert(cs[i].nodeValue);//null
}
}
</script>
</head>
<body>
班级类型：
<input type="radio" name="testName" value="1"/>社会个体
<input type="radio" name="testName" value="2"/>高校个体
<input type="radio" name="testName" value="3"/>小学期
<input type="button" value="打印元素情况" onclick="show();"/>
</body>
</html>
getElementsByClassName()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(){
var cs=document.getElementsByClassName("testName");
for(var i=0;i<cs.length;i++){
alert(cs[i].nodeName);//input
alert(cs[i].nodeValue);//null
}
}
</script>
</head>
<body>
班级类型：
<input type="radio" class="testName" value="1"/>社会个体
<input type="radio" class="testName" value="2"/>高校个体
<input type="radio" class="testName" value="3"/>小学期
<input type="button" value="打印元素情况" onclick="show();"/>
</body>
</html>
getElementsByTagName()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(){
var cs=document.getElementsByTagName("input");
for(var i=0;i<cs.length;i++){
alert(cs[i].nodeName);//input
alert(cs[i].nodeValue);//null
}
}
</script>
</head>
<body>
班级类型：
<input type="radio" class="testName" value="1"/>社会个体
<input type="radio" class="testName" value="2"/>高校个体
<input type="radio" class="testName" value="3"/>小学期
<input type="button" value="打印元素情况" onclick="show();"/>
</body>
</html>
使用建议：
如果获取的元素节点是唯一的，最好通过ID方式来获取，直接返回单一元素对象。而其他三种都是返回元素集合，就算只获取到一个元素，也要用指定下标获取元素对象，所以在一次性获取多个符合要求的元素节点时，使用getElementsXxx()系列方法会更方便。
其中通过name属性值的获取元素节点集合方法一般用于表单元素中。
获取层次节点/获取父or子or兄弟元素
parentNode 父级元素
nextElementSlibing 下一个兄弟
previousElementSlibing 上一个兄弟
children 子节点 忽略空白节点
childNodes 子节点 包含空白节点（不建议）
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
firstChild/lastChild 第一个/最后一个节点，包括空白text节点（不建议）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
/* 以上面代码的<div>元素来测试 */
var idDiv_1 = document.getElementById("div_1"); //获取id div_1 的元素节点
console.log("父节点");
console.log(idDiv_1.parentNode);
console.log("所有子节点(包括空白文本节点)");
console.log(idDiv_1.childNodes); //拿到所有子节点，包括空白文本节点
console.log("div_1元素节点的第一个子节点和最后一个子节点")
console.log(idDiv_1.firstChild); //会拿到空白文本节点
console.log(idDiv_1.lastChild);
console.log("忽略空白文本节点，元素子节点和最后一个元素子节点")
console.log(idDiv_1.firstElementChild); //第一个子节点
console.log(idDiv_1.lastElementChild); //最后一个子节点
var div_1s = document.getElementById("div_1"); //获取id = div_1的元素节点
var ul_1 = div_1s.getElementsByTagName("ul")[0]; //获取div_1s节点中的第一个ul元素子节点
console.log("ul元素节点的前一个节点和后一个节点");
console.log(ul_1.previousElementSibling);
console.log(ul_1.nextElementSibling.nextElementSibling.nextElementSibling);
}
</script>
</head>
<body>
<div id="div_1">
<p>P元素文本</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<input type="text" value="NIUBI" id="in_1"/>
<button>按钮</button>
<button>按钮2</button>
</div>
</body>
</html>
DOM节点实现增删改查
查询节点上面已提到。获取元素节点后，可以通过节点对象的以下方法对文档结构进行增删改外加复制。
创建
createElement("元素标签") 创建一个元素节点。
createAttribute("属性名") 创建属性节点(不常用)。使用setAttribute()更方便。
createTextNode("文本内容") 创建文本节点。
添加
appendChild(element) 向节点的子节点列表末尾添加新的子节点
insertBefore(添加的元素节点，已知子节点) 在已知子节点前插入一个新的子节点
删除节点
removeChild(elementNode) 删除指定的元素节点
removeAttribute(attributeNode) 删除指定的属性节点
替换节点
replaceChild(newElement, oldElement) 新节点替换老节点，新节点会消失。注意两者节点类型要一致。
复制节点
nodeObject.cloneNode(boolean) true克隆当前节点以及所有子节点；false只克隆当前节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
//添加P元素到body元素节点中，默认为子节点尾部。
document.getElementById("btn_1").onclick = function(){
var creP = document.createElement("p");
creP.innerText = "--创建的P元素节点--";
document.body.appendChild(creP);
}
//创建一个p元素节点，并插入到body元素的第一个子节点
document.getElementById("btn_2").onclick = function(){
var creP = document.createElement("p");
creP.innerText = "--插入到第一位的P元素节点--";
//拿到body元素的第一个元素节点，将p元素放在它之前
document.body.insertBefore(creP, document.body.firstElementChild);
}
//创建文本节点并插入到调用该函数的元素节点中
document.getElementById("btn_3").onclick = function(){
var creText = document.createTextNode("创建的文本节点");
this.appendChild(creText);
}
}
//删除body元素中第一个子节点
function deleteFirstChild(){
var bodys = document.body;
bodys.removeChild(bodys.firstChild);
}
//把body元素节点第一个子节点替换成指定元素节点的第一个子节点
function repalceFirstNode(id){
var firstChild = document.body.firstElementChild;
var idTest = document.getElementById(id);
idTest.replaceChild(firstChild, idTest.childNodes[0]);
}
//把body元素节点的第一个子节点的文本内容替换成指定元素节点的第一个文本节点
function repalceText(id){
var firstText = document.body.firstElementChild.innerText; //拿到body元素中的第一个子节点的文本内容
var creText = document.createTextNode(firstText);//创建文本节点
var idTest = document.getElementById(id);
idTest.replaceChild(creText, idTest.childNodes[0]);//新文本节点替换成获取指定元素节点的第一个子节点(可能是空白文本)
}
//克隆前三个按钮元素节点
function closeBtn(){
var buttons = document.getElementsByTagName("button");
for(var i = 0; i < 3; i++){
document.getElementById("div_2").appendChild(buttons[i].cloneNode(true)); //深度克隆，包含所有子节点
}
}
</script>
</head>
<body>
<button id="btn_1">body元素中常规插入P元素</button>
<button id="btn_2">P元素节点插入到第一个</button>
<button id="btn_3">点击我更换按钮文本</button><br>
<button id="btn_4" onclick="deleteFirstChild()">删除body元素中的第一个子节点</button>
<button onclick="repalceText('div_2')">替换文本节点</button>
<button onclick="repalceFirstNode('div_2')">替换第一个子节点</button>
<button onclick="closeBtn()">克隆前三个按钮到div_2中</button>
<div id="div_1">
第一个div
</div>
<div id="div_2">
第二个div
</div>
</body>
</html>
小例子##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr=new Array("#80cc80","#c0aac0")
function create() {
for (i=0; i < 10; i++) {
tmp=document.all.mytable.insertRow().insertCell()
tmp.innerText="line"+i;
tmp.style.background=arr[i%arr.length]
}
}
</script>
</head>
<body bgcolor="#ffffff">
<TABLE id="mytable"></TABLE>
<input type="button" value="创建" onclick="create()"/>
</body>
</html>
DOM操作属性节点
属性是元素的一部分，所以只有获得元素节点后，才能获取和设置属性节点。
getAttribute("属性名") 通过指定属性名，获取属性值
setAttribute("属性名","新属性值") 如果属性名存在，则更改属性值。如果不存在，则创建一个新属性并赋值。
简便形式：element.属性名 可以获取和设置指定属性的属性值。但该属性必须存在。
element.removeAttribute("属性") 删除元素节点的指定属性名
element.attributes 返回元素节点中包含所有属性的集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
var inNode = document.getElementById("in");
//获取元素节点
//修改属性值
inNode.setAttribute("value", "新用户");
inNode.setAttribute("type", "button");
console.log(inNode.getAttribute("value") + "," + inNode.getAttribute("type"));
//添加新属性
inNode.setAttribute("newAttr", "瞎搞的");
//简便方式
inNode.type = "radio";
inNode.value = "单选框";
console.log("简便方式：" + inNode.type + "," + inNode.value);
inNode.removeAttribute("name"); //删除name属性
//获取当前元素节点的所有属性
var allAttr = inNode.attributes;
for(var i = 0; i < allAttr.length; i++){
console.log(allAttr[i]);//打印属性到控制台
}
}
</script>
</head>
<body>
<input type="text" id="in" name="username" value="用户">用户
</body>
</html>
DOM操作文本节点
- DOM将元素中的文本内容当作节点层次之一，即文本节点，文本节点是TextNode对象。
- 下面文本节点的属性我只列出了一个文本节点独有属性data，但文本节点也是Node对象，所以依然可用其他节点属性，例如nodeName/Type/Value、获取相关层次节点等属性，而length属性和data.length差不多。
- 文本节点中最容易出现的兼容问题就是空白文本节点，后面会说到怎么解决。
- 除了通过文本节点的方法和属性来处理文本节点(前提是要获取到文本节点)；还可以将文本内容提取成字符串，处理后，再放回去。关于这两种操作的用法后面会依次介绍。
属性
data 设置或获取 TextNode 对象的值。
方法
appendData(string) 添加字符串到文本节点末尾处。
insertData(offset, string) 从offset指定位置插入string
deleteData(offset, count) 从offset起删除count个字符
replaceData(off,count,string) 从off起将count个字符用string替换
splitText(offset) 从offset起将文本节点分割
substringData(offset, count) 返回从offset起的count个字符
关于空白文本节点
- 导致空白文本节点的原因：当标签换行，就会产生一个换行符，或者打一个空格，浏览器解析时会把他们当做空白文本节点。
- 在获取第一个子节点时极容易获取到空白文本节点。那怎么避免空白文本节点呢？
- 一是所有标签写一行，但这不符合代码美感。
- 二是将文本内容单独存储在一个元素子节点中，避免元素子节点同时存在文本节点和元素节点，这样再通过firstElementChild和children等属性就只拿到元素节点，再单独对该节点进行处理。
解决空白节点后，下面开始操作文本节点，这里采用文本节点的方法来处理文本内容，使用方法类似于字符串。下面是一个综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="p_2">
<div>面朝大海</div>
<p>春暖化开</p>
<button onclick="appendStr()">添加文本</button>
<button onclick="insertStr()">插入文本</button>
<button onclick="deleteStr()">删除指定文本</button>
<button onclick="replaceStr()">替换文本</button>
<button onclick="split()">切割文本</button>
<button onclick="subString()">截取前2个文本字符并返回</button>
</div>
<script>
var cd = document.getElementById("p_2").children; //获取所有的有效元素子节点，全局变量
//给所有的文本节点增加一段话
function appendStr(){
for(var i = 0; i < cd.length; i++){
//获取每个元素子节点的第一个子节点，这里是文本节点
var tmp = cd[i].firstChild;
tmp.appendData("给文本节点中附加一小段话~");
}
}
//从文本节点第一个字符开始插入
function insertStr(){
for(var i = 0; i < cd.length; i++){
//拿到每个元素子节点的第一个子节点，这里是文本节点
var tmp = cd[i].firstChild;
tmp.insertData(0, "从第一个字符插入文本");
}
}
//删除[0, 2)区间的字符文本
function deleteStr(){
for(var i = 0; i < cd.length; i++){
var tmp = cd[i].firstChild;
tmp.deleteData(0, 2);
}
}
//[0,2)区间用replace字符串代替
function replaceStr(){
for(var i = 0; i < cd.length; i++){
var tmp = cd[i].firstChild;
tmp.replaceData(0, 2, "replace");
}
}
//把文本节点从中间切割成两部分
function split(){
for(var i = 0; i < cd.length; i++){
var tmp = cd[i].firstChild;
tmp.splitText(tmp.data.length/2);
}
}
//截取文本节点的[0, 2)区间字符
function subString(){
for(var i = 0; i < cd.length; i++){
var tmp = cd[i].firstChild;
tmp.data = tmp.substringData(0,2);
//tmp.replaceData(0,tmp.length,tmp.substringData(0,2));
}
}
</script>
</body>
</html>
学生练习：
1）动态添加多行，并奇偶变色
2）请使用Javascript代码补全doSomething ()方法，实现文本框输入内容，div根据输入内容调整的功能。
要求：
（1）当输入的内容是red，blue或black时，对应更改div中的字体颜色。
（2）当输入的内容是算数表达式时(如：2+3*5)，在div中显示计算结果。
（3）当输入的内容是文字时，在div中显示这些文字。
<input type="text" id="input">
<input type="button" value="输入" onClick="doSomething();">
<div id="output">welcome</div>
作者：wqjcarnation
链接：https://www.jianshu.com/p/fabcbe9d93d9
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论