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>