DOM操作

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值