js DOM
2020-09-28 本文已影响0人
lucky_yao
1：什么是dom对象？
dom对象就是html页面，dom对象的全称叫document object model(文档对象模型)
2：dom对象的作用是什么呢？
dom对象就是通过一些方法和属性来操作标签，
这么操作标签？
将标签元素进行添加、移动、改变或移除
3：标签==标记==元素==节点
4: dom节点的分类？
dom节点分为3种类型
1：标签节点
2：文本节点
属于标签下面的子节点
3：属性节点
5：返回节点类型值
nodeName 该节点的名字，和tagName方法一样
nodeValue 该节点的文本
nodeType 该节点的编码 标签节点返回数字1,属性节点返回数字2，文本节点返回数字3
6:查找子节点
childNodes[0] 返回当前元素节点的所有子节点
firstChild 获取该节点的第一个子节点
lastChild 获取该节点的最后一个子节点
parentNode 获取该节点的父节点
previousSibling 获取该节点的前一个节点
nextSibling 获取该节点的下一个节点
children[0] 获取该节点的子标签节点
firstElementChild 第一个子标签属性
lastElementChild 最后一个子标签属性
nextElementSibling 下一个兄弟元素节点
previousElementSibling 前一个兄弟元素节点
childElementCount 子元素节点个数量
7:查找属性节点
attributes 属性
8:操作属性节点
document.getAttribute()//获取特定元素节点属性的值/通过属性获取到对应的属性值
document.setAttribute(要设置的属性，属性值)//设置特定元素节点属性的值/通过属性设置对应的属性值
document.removeAttribute()//移除特定元素节点属性的值
9:操作节点
createElement()//创建标签
createTextNode()//创建文本
appendChild(创建的标签名，当前的标签名)//把标签或者文本插入/添加到另一个节点里面 不加引号
insertBefore()//在当前节点前面创建一个节点
用insertBefore方法创建节点必须先找到当前节点的父节点后，在创建 方法里面不加引号
replaceChild(新节点，旧节点)//把节点替换成指定的节点
cloneNode(false/true)//克隆/复制节点 true克隆的是标签+文本 如果是false 只会克隆标签
removeChild()//删除节点
10：移入移出事件
onmousemove 移入事件
onmouseout 移出事件
onmouseover 移入事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 200px;
background: black;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
var oDiv=document.getElementsByTagName('div')[0];
var turr=true;
oDiv.onmouseover=function(){
this.style.background='red'
}//移入事件
oDiv.onmouseout=function(){
this.style.background='green'
} //移出事件
/* oDiv.onmousemove=function(){
if(turr==true){
this.style.background='red';
turr=false;
}else{
this.style.background='green';
turr=true;
}
}//移入移出事件 */
</script>
</html>
