- A+
所属分类：Web前端
JavaScript DOM 基础操作
一、获取元素的六方式
document.getElementById('id名称') //根据id名称获取 document.getElementsByclassName('元素类名') //根据元素类名获取 返回值：伪数组 document.getElementsByTagName('元素类名') //根据元素标签获取 返回值：伪数组 document.querySelector('选择器') //根据选择器获取第一个元素 document.querySelectorAll('选择器') //根据选择器获取所有元素 返回值：伪数组 二、操作元素内容
1.获取元素文本内容
格式：
获取内容：元素 . innrtText
修改内容：元素 . innerText="修改的内容"
//点击div盒子改变里面的文本 <div Style="background:red" id="JD">我是旧的内容</div> //获取元素(通过标签选择器来获取内容) var ele=document.querySelector('div') //获取元素(通过id获取元素) var btn=document.getElementById('JD') //获取元素文本内容并输出 console.log(ele.innerText) //给div一个点击事件(这里用的是id获取到的div元素) btn.onclick=function(){ //重新为div设置新的内容 ele.innerText="我重生了" } 2.操作元素超文本内容（直接修改代码）
格式：
获取内容：元素 . innrtHTML
修改内容：元素 . innerHTML="新的标签"
//点击div盒子把div变成p标签 <div style="background:red" id="JD">我是div盒子</div> //获取元素(通过标签选择器来获取内容) var ele=document.querySelector('div') //获取元素(通过id获取元素) var btn=document.getElementById('JD') //获取元素的标签里的内容以文本的方式并输出 console.log(ele.innerHTML) //给div一个点击事件(这里用的是id获取到的div元素) btn.onclick=function(){ //把div盒子变成p标签 ele.innerHTML="<p>我变成了p标签了，嘤嘤嘤！</p>" } 三、操作元素属性
1.原生属性（type、id、src）
格式：
获取属性：元素 . 属性名
设置属性： 元素 . 属性名=”属性值“
//点击图片改变图片背景链接达到来回切换背景的效果 //html <img scr="../img/bg1.jpg" id="bg"> //JavaScript //获取元素(通过id获取元素) var btn=document.getElementById('bg') //获取元素scr的路径并输出 console.log(btn.src) var tes=0 //控制切换的图片 //给img一个点击事件(这里用的是id获取到的img元素) btn.onclick=function(){ if(tes===0){ btn.src="../img/bg2.jpg" alt="JavaScript DOM 基础操作" tes=1 }else{ btn.src="../img/bg1.jpg" alt="JavaScript DOM 基础操作" tes=0 } 2.定义和操作自定义属性
（1）定义属性
定义格式：data-*
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="wight:500px;height:500px;background:black" data-a="p1" id="ab"> p1 <div style="wight:150px;height:150px;background:green" data-a="p2">p2</div> <div style="wight:150px;height:150px;background:blue" data-a="p3">p3</div> </div> <script> //获取到父的div元素 var divab=document.getElementById("ab") //点击点击子元素父元素的事件也会被触发 divab.onclick=function(e){ //用自定义属性来判断点的是子元素，还是父元素。 if(e.target.dataset.a==="p1"){ console.log("p1") } if(e.target.dataset.a==="p2"){ console.log("p2") } if(e.target.dataset.a==="p3"){ console.log("p3") } } </script> </body> </html> （2）操作自定义属性
操作自定义属性格式：
获取属性：元素 . getAttribute("属性名")
设置属性：元素 . setAttribute("属性名"，”属性值“)
删除属性：元素 . removeAttribute("属性名")
//html <div id="tes" data-cs="Hello Wrold">自定义属性测试</div> //JavaScript //获取元素 var ter=document.getElmentById("tes") //获取自定义属性并输出 console.log(ter.getAttribute(CS)) //重新给自定义属性CS赋值 ter.setAttribute("CS","Hello man") //删除自定义属性 ter.removeAttribute("CS") 四、操作元素类名
格式：
获取类名：元素 . className
设置类名：元素 . className="新类名"
//点击div盒子和实现改变背景颜色 //设置类名改变div的背景色 .divBgRed{ background:red; } .divBgBlue{ background:blue; } <div class="divBgRed" id="divid">我是可以变颜色的盒子</div> //获取div的元素 var divid=document.getElementById("divid") divid.onclick=function(){ divid.className="divBgBlue" } 五、操作元素行内样式
格式：
获取行内样式：元素 .style . 样式名
设置行内样式：元素 . style.样式名="样式值"
//输出和修改行内样式 <div style="background-color:red;width=100px" id="divid">我是红色的div盒子</div> var tre=document.getElementById("divid") console.log(tre.style.backgroundColor) //当行内样式有短横线时，把短横线去掉变成驼峰写法 tre.onclick=function(){ tre.style.background="blue" tre.style.width="500px" } 六、获取非行内样式
格式：window . getComputedStyle(元素) . 样式名
注意：行内样式和非行内样式都可以获取
七、节点操作(标签)
1.创建结点（标签）
格式：document.creatElement("标签名称")
var div=document.creatElement("div") var p=document.creartElement("p") 2.插入结点（标签）
格式：
**父节点的元素 . appendChild(子节点) ** //默认在最后插入
父节点元素 . insertBefore(要插入的节点，哪一个你节点的前面)
<<body> <div> <span>我是span标签</span> <ul>我是ul标签</ul> </div> <script> //问题1：在ul标签里面的最后位置插入li标签 //获取ul标签的元素 var ul=document.querySelector("ul") //创建li标签 var li=document.createElement("li") //在ul标签里插入li标签 ul.appendChild(li) //问题2：在div里的span标签前面插入入一个p标签 //获取div父元素 var div=document.querySelector("div") //获取要插入位置的后一个标签的元素 var span=document.querySelector("span") //创建要插入的p标签 var p=document.createElement("p") //在相应位置插入p标签 div.insertBefore(p,span) </script> </body> 3.删除节点（标签）
格式：
父节点元素 . removeChild(子节点)
想删除节点元素 . remove()
<body> <div> <span>标签</span> </div> </body> <script> //获取父标签的元素 var div=document.querySelector("div") //删除span标签 div.removeChild(span) //获取要删除span标签的元素 var span=ocument.querySelector("span") //删除span标签 span.remove() </script> 4.替换节点（标签）
格式：
父节点元素 . replaceChild(换上节点，换下节点)
<body> <div> <span>标签</span> </div> </body> <script> //获取span标签的父元素 var div=document.querySelector("div") //创建p标签 var p=document.creartElement("p") //获取span标签的元素 var span=document.querySelector("span") //把span标签替换成p标签，里面的内容不变 div.replaceChild(p,span) </script> 5.克隆节点（标签）
说明：就是把想要的标签复制一份，需要结合插入标签才能有用（相对于复制和粘贴）
格式：
想要克隆标签的元素 . cloneNode(是否克隆后代节点)
//问题：把div标签复制一份，并复制里面的子元素 <body> <div> <span>标签</span> </div> </body> <script> //获取div标签的元素 var div=document.querySelector("div") //克隆div标签并克隆里面的子元素 var cle=div.cloneNode(true) //把复制的div标签插入到原来div后面 //获取body标签的元素 var body=document.querySelector("body") //插入div标签 body.appendChild(cle) </script> 
