pythondom操作
1.DOM介绍
(1)什么是DOM
DOM：⽂档对象模型。DOM 为⽂档提供了结构化表⽰，并定义了如何通过脚本来访问⽂档结构。⽬的其实就是为了能让js操作html 元素⽽制定的⼀个规范。
DOM就是由节点组成的。
(2)解析过程
HTML加载完毕，渲染引擎会在内存中把HTML⽂档，⽣成⼀个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
DOM树（⼀切都是节点）
DOM的数据结构如下：
上图可知，在HTML当中，⼀切都是节点：（⾮常重要）
元素节点：HMTL标签。
⽂本节点：标签中的⽂字（⽐如标签之间的空格、换⾏）
属性节点：：标签的属性。
整个html⽂档就是⼀个⽂档节点。所有的节点都是Object。
(3)DOM可以做什么
对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序
1.获取DOM的⽅式
<script>
console.log(window); //加载出窗⼝
console.log(document); //打印出⽂档
console.log(document.documentElement);  //打印⽂档中的元素        console.log(document.body); //打印⽂档的body
// 通过id 获取
var oDiv = ElementById("active");
console.log(oDiv);  // 获取到该标签下的内容
var oTag = ElementsByTagName("div")[0];
console.log(oTag); // div标签
//通过类名来获取，获取的也是伪数组，多个DOM对象
var oActive = ElementsByClassName("box");
console.log(oActive);
for(var i = 0; i< oActive.length;i++){
//样式设置
oActive[i].style.backgroundColor = "yellow";
}
//救命稻草
var oD = document.querySelectorAll("div p");
console.log(oD);
oD .forEach(function (item, index) {
console.log(item)  //  <p>倚天屠龙记</p>
})
</script>
事件的三要素：事件源、事件、事件驱动程序
总结如下：blur事件
事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。
<title>Title</title>
<script>
/*窗⼝加载  1.先去加载⽂档  2.再去加载图⽚*/
console.ElementById('btn'));
// ElementById("btn").onclick = function () {
//    alert(1);
// };
console.log("⿏标悬停了")
};
console.log("⿏标离开了")
}
}
</script>
</head>
<body>
<button id ="btn">点我</button>
常见事件
(2)对标签值的操作
innerText
/
/设置⽂本
var ElementById('box');
oDiv.innerText='哈哈哈'
innerHTML
//既可以设置⽂本⼜可以设置标签设置 set 获取 get  点语法(set⽅法和get⽅法) oDiv.innerHTML='<h3>嘿嘿嘿</h3>'
(3) 获取标签内容值
//只获取所有(当前标签和⼦标签)⽂本内容
console.log(oDiv.innerText);
//获取⽗标签中所有标签元素(⼦标签，空格，换⾏,⽂本) console.log(oDiv.innerHTML);
(4)对表单控件value的操作
//设置value值只适应于表单控件元素
(5)对标签的css操作(样式操作)
xxx.style.css的属性key='值'
盒⼦颜⾊的切换
var oDiv = ElementsByClassName('box')[0];
var isRed = true;
if (isRed) {
//this  谁做的事件操作 this指向谁
this.style.backgroundColor = 'green';
this.style.width = '400px';
isRed = false;
} else {
this.style.backgroundColor = 'red';
isRed = true;
}
}
(6)对标签属性的操作
<script>
var oDiv = ElementsByClassName("box")[0];
var oBtn = ElementById("btn");
var isShow = true;
if(isShow){
oDiv.id = "box1";
oDiv.title = "hhhh";
console.log(oDiv.className); //box
oDiv.className = oDiv.className+"active";
isShow = false
}else{
oDiv.className = "box";
isShow = true
}
}
</script>
DOM的操作(创建，追加，删除)
js中的⾯向对象
定时器
1. DOM的操作(创建，追加，删除)
(1)DOM节点的获取
parentNode 获取⽗级标签
nextElementSibling 获取下⼀个兄弟节点
children 获取所有的⼦标签
<script>
var oP = ElementById("wuxia");
console.log(oP.parentNode); // ⽗级div标签下的所有内容        console.ElementSibling.innerText);  //萧峰
console.Sibling.innerText); // IE浏览器
var a = oP.nextElementSibling|| oP.nextSibling;
console.log(a);
console.log(oP.parentNode.childen);
</script>
(2) DOM的增删操作
创建 createElement()
//既可以创建已有的标签，还可以创建⾃定义的标签
var oDiv = ateElement('div')
追加 appendChild() ⽗⼦标签操作
⽗.appendChild(oDiv);
删除 removeChild()
⽗.removeChild(⼦节点);
⾃⼰.veChild(⾃⼰)
插⼊insertBefore()
⽗.insertBefore(新的⼦节点，要参考的节点)
利⽤创建删除实现隐藏代码⽰例

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。