DOM操作

最新推荐文章于 2024-07-25 09:24:40 发布

Y636

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量108

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_56464670/article/details/125788301

版权

1、什么是DOM

文档对象模型 DOM 是document object model，它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口，把文档中的代码翻译成一个对象模型，在这个模型中，所有相关的标签属性注释文本等等12种数据，都翻译为一种类型的对象，统称节点对象。这些对象之间在文档模型数据结构中存在某种关系: 根节点、父子节点、同胞节点等等

1）只有一个根节点document

2）除了根节点外所有节点都有唯一的一个父节点

3）document是window对象的属性

4）全局对象模型属于BOM操作Browser Object Model，把浏览器对外提供的接口翻译为一个对象，它不属于标准的接口，但是浏览器厂商都提供了几乎一样的功能

5）元素的属性也是独立节点，叫属性节点，但是不是元素节点的子节点

2、获取元素的方法

//旧方法
document.getElementById()  //查找速度最快
document.getElementByClassName()
document.getElementByName()
document.getElementByTagName()

//H5新出的方法
document.querySelector()
document.querySelectorAll()

注：不建议直接使用标签的id作为节点对象使用

3、通过关系获取节点

//父级 父元素与父结点
var re1=document.getElementById("a1").parentElement  //父元素
var re2=document.getElementById("a1").parentNodes  //父节点

//子级  子元素与子节点
var re1=document.getElementById("a1").children  //子元素
var re2=document.getElementById("a1").chuldNodes  //子节点

//平级  
//上一个兄弟节点和元素
var re1=document.getElementById("a1").previousSibiling  //上一个兄弟节点
var re2=document.getElementById("a1").previousElementSibiling  //上一个兄弟元素
//下一个兄弟节点与元素
var re1=document.getElementById("a1").nestSibiling  //下一个兄弟节点
var re2=document.getElementById("a1").nextElementSibiling  //下一个兄弟元素

//第几个
//第1个子节点
var re1=document.getElementById("a1").firstChild  //第一个子节点
var re2=document.getElementById("a1").firstElementChild  //第一个子元素
//最后一个子节点
var re1=document.getElementById("a1").lastChild  //最后一个子节点
var re2=document.getElementById("a1").lastElementChild  //最后一个子元素
//调用父元素中的第几个元素
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("box4").index2()
console.log(index)

4、表格的隔行换色

（1）静态的隔行换色

(function (){
var trs=document.querySelectoeAll("#tb tr")  //先获取元素
for(var i=0;i<trs.length;i++){  //遍历
if(i%2){
trs[i].style.backgroundColor="red"
}else{
trs[i].style.backgroundColor="yellow"
}
}
})()

（2）动态点击换色

//行换色
(()=>{
var tr=document.querySelectorAll("tr")
for(let i=0;i<trs.length;i++){  //循环let保留数据
trs[i].onclick=function (){  //点击调用函数
trs.forEach((el)={      //遍历先将全部设为白色，然后利用排他 ，将被点击的表格变色然后点另一行再变回原来的颜色
el.style.backgrouneColor="white"
})
trs[i].style.backgroundColor="red"
}
}
}()

//列变色
 Object.prototype.index2 = function () {
     var arr = this.parentElement.children
     for (let i = 0; i < arr.length; i++) {
          if (this == arr[i]) {
             return i
          }
     }
}
var bbox=document.querySelector("bbox")
var trs = document.querySelectorAll("tr")
var tds = document.querySelectorAll("td")
for (let i = 0; i < tds.length; i++) {
     tds[i].onclick = function () {
         tds.forEach((el) => {
             el.style.backgroundColor = "white"
          })
         let x = tds[i].index2()
         trs.forEach((el) => {
             el.children[x].style.backgroundColor = "blue"
          })
     }
}

5、元素的操作

<body>
<a id="bd" href="http://www.baidu.com">百度</a>
<div id="bg">我是一只鱼</div>
<input id="nt" type="text" value="">
<button id="btn">change</button>

<script>
btn.onclick = function fn() {
bd.href="https://uland.taobao.com/"
bg.innerHTML="橘子海"
bg.style.backgroundColor="blue"
nt.value="hello,world"
}
</script>
</body>