提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
目录
（1）document.getElementById（ 'id名'）
（2）document.getElementsByClassName（'类名' ）
（3）document.getElementsByName（ '类名'）
（4）document.getElementsByTagName（'标签名' ）
（1）document.querySelector（ '选择器'）
（2）document.querySelectorAll（'选择器' ）
1.什么是DOM操作
DOM（文档对象模型 ）
（1）DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口 把文档中的代码翻译成一个对象模型
（2） W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
（3） 在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象
（4）这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等
12种数据如下：
1.只有一个根节点document
2.除了根节点外所有节点都有唯一的一个父节点
3.document是window对象的属性
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象 BOM操作会在接下来的知识点讲到 它不属于标准的接口 但是浏览器厂商都提供了几乎一样的功能
5.元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点
2.获取元素的方式（如何获取页面元素）
获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
2.1系统提供的方法（旧方法）
（1）document.getElementById（ 'id名'）
document.getElementById（ ）可以获取带ID的元素对象 //查找速度最快
<div id="box1" title="123">
<div class="box2">hello</div>
<div class="box2">hello</div>
<div class="box2">hello</div>
<div class="box2">hello</div>
</div>
<div id="box1">123</div>
var div1=document.getElementById("box1") //如果没有就返回null
console.log(div1)
div1.title="6666666666"
（2）document.getElementsByClassName（'类名' ）
document.getElementsByClassName（ ）根据类名返回元素对象合集
案例如下：
<div id="box1" title="123"> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> </div> <div id="box1">123</div> var arr=document.getElementsByClassName("box22") console.log(arr)运行结果：
（3）document.getElementsByName（ '类名'）
案例如下：
<div id="box1" title="123"> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> </div> <div id="box1">123</div> <div class="box2">123</div> <a href="#" class="box2">123</a> <input type="radio" name="food" value="apple">apple <input type="radio" name="food" value="pear">pear <input type="radio" name="food" value="banana">banana var inps=document.getElementsByTagName("i") console.log(inps)运行结果：
（4）document.getElementsByTagName（'标签名' ）
document.getElementsByTagName（ ）根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己。
注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己
案例如下：
<div id="box1" title="123"> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> </div> <div id="box1">123</div> <div class="box2">123</div> <a href="#" class="box2">123</a> <input type="radio" name="food" value="apple">apple <input type="radio" name="food" value="pear">pear <input type="radio" name="food" value="banana">banana var inps=document.getElementsByTagName("i") console.log(inps)运行结果：
2.2H5出的新方法
（1）document.querySelector（ '选择器'）
document.querySelector ：根据指定选择器返回第一个元素对象
（2）document.querySelectorAll（'选择器' ）
document.querySelectorAll：根据指定选择器返回所有元素对象
注意：querySelector 和 querySelectorAll 里面的选择器需要加符号
querySelector符合选择器就是第一个元素，不符合选择器就是null
querySelectorAll符合选择器的就是所有元素，不符合选择器就是[ ]
案例如下：
<div id="box1" title="123"> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> <div class="box2">hello</div> </div> <div id="box1">123</div> <div class="box2">123</div> <a href="#" class="box2">123</a> <input type="radio" name="food" value="apple">apple <input type="radio" name="food" value="pear">pear <input type="radio" name="food" value="banana">banana var el=document.querySelector(".box22") //符合选择器的第一个元素/null console.log(el) var arr=document.querySelectorAll(".box2") //符合选择器的第所有元素/[] console.log(arr)运行结果：
//不建议使用
直接使用标签的id作为节点对象引用
总结 H5的技术很好用 但是getElementById的速度是最快的
2.3通过关系获取节点
（1）父级节点
//父级 父元素和父节点是同一个
var re=document.getElementById("div1").parentElement //父元素
var re=document.getElementById("div1").parentNode //父节点
案例如下：
<div id="box1">hello <div class="box2" id="box4">2</div> <div class="box2"> <div class="box3" id="box5">box3</div> </div> <div class="box2" id="box6">4</div> </div> var box4 = document.querySelector("#box4") //父级 var box4baba = box4.parentElement console.log(box4baba) var box5 = document.querySelector("#box5") console.log(box5.parentNode.parentNode.parentNode.parentNode.parentNode)运行结果：
（2）子级节点
//子级 子元素和子节点不一定是同一个
var son1=document.getElementById("box1").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes//返回值是子节点们 没有返回空数组
console.log(son1)
案例如下：
<div id="box1">hello <div class="box2" id="box4">2</div> <div class="box2"> <div class="box3" id="box5">box3</div> </div> <div class="box2" id="box6">4</div> </div> var box4 = document.querySelector("#box1") var arr=box4.children//子元素 var arr2=box4.childNodes//子节点 console.log(arr,arr2) var box=document.querySelector("#box4") console.log(box.children,111)运行结果：
（3）兄弟节点
（3.1）下一个兄弟节点
var re = document.getElementById("box4").nextSibling
//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
案例如下：
<div id="box1">hello <div class="box2" id="box4">2</div> <div class="box2"> <div class="box3" id="box5">box3</div> </div> <div class="box2" id="box6">4</div> </div> //弟弟节点 var box = document.querySelector("#box4") console.log(box.nextElementSibling) //弟弟元素 console.log(box.nextSibling) //弟弟节点 var box6 = document.querySelector("#box6") console.log(box6.nextElementSibling) //弟弟元素 console.log(box6.nextSibling) //弟弟节点运行结果：
(3.2)上一个兄弟节点
var re=document.getElementById("box3").previousSibling
//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling//上一个兄弟元素 没有返回null
console.log(re)
案例如下：
<div id="box1">hello <div class="box2" id="box4">2</div> <div class="box2"> <div class="box3" id="box5">box3</div> </div> <div class="box2" id="box6">4</div> </div> //哥哥节点 var box = document.querySelector("#box4") console.log(box.previousElementSibling) //弟弟元素 console.log(box.previousSibling) //弟弟节点 var box6 = document.querySelector("#box6") console.log(box6.previousElementSibling) //哥哥元素 console.log(box6.previousSibling) //哥哥节点运行结果：
（4）第一个子节点
//第1个子节点
var son1=document.getElementById("box1").firstChild
var son2=document.getElementById("box1").firstElementChild
console.log(son1,son2)
案例如下：
<div id="box1">hello <div class="box2" id="box4">2</div> <div class="box2"> <div class="box3" id="box5">box3</div> </div> <div class="box2" id="box6">4</div> </div> //第1个子元素 var box = document.querySelector("#box4") console.log(box.firstElementChild)//第1个子元素 console.log(box.firstChild)//第1个子节点运行结果：
（5）最后一个子节点
//最后一个子节点
var son1=document.getElementById("box1").lastChild
var son2=document.getElementById("box1").lastElementChild
案例如下：
<div id="box1">hello <div class="box2" id="box4">2</div> <div class="box2"> <div class="box3" id="box5">box3</div> </div> <div class="box2" id="box6">4</div> </div> //最后一个子元素 var box = document.querySelector("#box4") box.children[box.children.length-1] box.childNodes[box.childNodes.length-1] console.log(box.lastElementChild)//最后一个子元素 console.log(box.lastChild)//最后一个子节点运行结果：
（6）获取自己是父元素中的第几个子元素/节点
//获取自己是父元素中的第几个子元素/节点
//自己实现这个方法:调用者是父元素中的第几个元素 .index()
Object.prototype.index2=function() {
console.log(this)
var arr=this.parentElement.childNodes
for (let i = 0;i<arr.length;i++) {
if(this==arr[i]){
return i
}
}
}
var index=document.getElementById("box6").index2()
console.log(index)Object.prototype.indexof1=function(){ var arr=this.parentElement.children for(let i=0;i<arr.length;i++){ if(arr[i]===this){ return i } } } var box = document.querySelector("#box6") console.log(box.indexof1())
//父元素中的第几个子元素/节点
var son1=document.getElementById("box1").children[1] //第二个子元素
var son2=document.getElementById("box1").childNodes[1] //第二个子节点
2.4特殊元素获取
document.body //body标签
document.forms //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址
排它思想：
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
3.表格的隔行变色
3.1竖列点击变色（动态）
<table class="td" border="1" width="400" height="200"> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> </table> <script> Object.prototype.indexof1=function(){ var arr=this.parentElement.children for(let i=0;i<arr.length;i++){ if(arr[i]===this){ return i } } } </script> <script> var tb=document.querySelector("#tb") var trs=document.querySelectorAll("tr") var tds=document.querySelectorAll("td") console.log(tds) for(let i=0;i<tds.length;i++){ tds[i].onclick=function(){ tds.forEach((el)=>{ el.style.backgroundColor="white" }) let x=tds[i].indexof1() trs.forEach((el)=>{ //el是tr元素 el.children[x].style.backgroundColor="blue" }) } } </script>思想： 排它思想
1.把所有的td的背景颜色设置为白色
2.获取当前点击的元素是一横排中的第x个元素
3.把没一横排的第x个元素 设置为red
效果图：
3.2表格间隔行变色（静态）
程序如下：
<table class="td" border="1" width="400" height="200"> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> </table> <script> (function(){ var trs=document.querySelectorAll(".td tr") for(var i=0;i<trs.length;i++){ console.log(i,trs[i]) if(i%2){ trs[i].style.backgroundColor="gray" } } })() </script>效果如下：
3.3点击切换行（动态）
程序如下：
<table class="td" border="1" width="400" height="200"> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> <tr > <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> </tr> </table> <script> (function(){ var trs=document.querySelectorAll(".td tr") for(var i=0;i<trs.length;i++){ console.log(i,trs[i]) if(i%2){ trs[i].style.backgroundColor="pink" } } })() </script>效果图如下：
4.操作元素
4.1元素的操作
4.2百度换肤
<style>
body{
background-image: url(./src/7.jpg);
background-size: 100% 800px;
}
img{
width: 120px;
height: 60px;
}
</style>
<img src="./src/7.jpg">
<img src="./src/8.jpg">
<img src="./src/9.jpg">
var imgs=document.getElementsByTagName("img")
var srcarr=["./src/7.jpg","./src/8.jpg","./src/9.jpg"]
for(let i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
document.body.style.backgroundImage=`url("${srcarr[i]}")`
}
} <style>
body{
background-image: url(./src/7.jpg);
background-size: 100% 800px;
}
img{
width: 120px;
height: 60px;
}
</style>
<img src="./src/7.jpg">
<img src="./src/8.jpg">
<img src="./src/9.jpg">
document.body.style.backgroundImage=`url("./src/7.jpg")`
var imgs=document.getElementsByTagName("img")
imgs[0].onclick=function(){
document.body.style.backgroundImage=`url("${imgs[0].src}")`
}
imgs[1].onclick=function(){
document.body.style.backgroundImage=`url("${imgs[1].src}")`
}
imgs[2].onclick=function(){
document.body.style.backgroundImage=`url("${imgs[2].src}")`
}4.3前端表单验证
程序如下：
<style> #p1{ visibility: hidden; color: red; } </style> <div> email<input type="text" id="email"> <br> <p id="p1">/* 邮箱格式错误 */</p> pwd<input type="password" id="pwd"> <br> <button id="btn">登录</button> </div> <script> var btn=document.getElementById("btn") btn.onclick=function(){ //获取输入框 中的value 然后验证 var email=document.querySelector("#email") var emailv=email.value var pwd=document.querySelector("#pwd").value console.log(email) console.log(pwd) var emailreg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ if(emailreg.test(emailv)){ email.style.border="1px green solid" document.querySelector("#p1").style.visibility="hidden" }else{ email.style.border="1px red solid" document.querySelector("#p1").style.visibility="visible" } } </script>
4.4tab切换效果
<style>设置大小背景颜色宽高</style>
<div class="content">
<div class="view">
<div class="viewconent">首页</div>
<div class="viewconent">选项</div>
<div class="viewconent">个人中心</div>
<div class="viewconent">设置</div>
</div>
<div class="tabbar">
<div class="btn">
<span>首页</span>
</div>
<div class="btn">选项</div>
<div class="btn">个人中心</div>
<div class="btn">设置</div>
</div>
</div>
<script>
var tabbarbtns=document.querySelectorAll(".tabbar .btn")
tabbarbtns.forEach((el,index)=>{
el.onclick=function(){
tabbarbtns.forEach((el2)=>{el2.style.backgroundColor="gainsboro"})
el.style.backgroundColor="skyblue"
//1.获取点击了第x个按钮index/el.indexof1()
//2.把内容区域的所有的隐藏 把内容区域的第x个显示
var viewconents=document.querySelectorAll(".viewconent")
viewconents.forEach((el3)=>{el3.style.display="none"})
viewconents[index].style.display="block"
}
})
</script>
877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
