DOM操作

nuanyue
189 阅读5分钟

节点的属性

nodeType节点的类型：1--标签 2--属性 3--值
nodeName 节点的名字：标签节点--大写的标签名字 属性节点--小写的属性名字 文本节点--#text
nodeValue节点的值：标签节点--null 属性节点--属性值 文本的节点--文本内容
  • 属性 文本没有嵌套关系 所以没有父子节点 只有标签才有父子节点
  • 因此父节点跟父元素获取的结果是一样的
<body>
<div>
<ul id="uu">
<li>卡卡西</li>
<li>鸣人</li>
<li>佐助</li>
</ul>
</div>
</body>
<script>
function my$(id){
return document.getElementById(id);
}
//获取父节点
console.log(my$("uu").parentNode);
//获取父元素
console.log(my$("uu").parentElement);
</script>

//获取子节点 子节点包括 标签 属性 文本（空格 文本 换行）
console.log(my$("dv").childNodes);
//获取子元素
console.log(my$("dv").children);
var child = my$("dv").childNodes;
for(var i=0; i<child.length;i++){
console.log(child[i].nodeType+'===='+child[i].nodeName+'==='+child[i].nodeValue);
}
//谷歌 火狐都支持 但是ie8获取节点的获取成元素 获取元素的是undefined不支持
//获取第一个子元素
console.log(my$("uu").firstElementChild);
//获取第一个子节点
console.log(my$("uu").firstChild);
//获取最后一个子元素
console.log(my$("uu").lastElementChild);
//获取最后一个子节点
console.log(my$("uu").lastChild);
//获取前一个兄弟元素
console.log(my$("zz").previousElementSibling);
//获取前一个兄弟节点
console.log(my$("zz").previousSibling);
//获取后一个兄弟节点
console.log(my$("zz").nextSibling);
//或许后一个兄弟元素
console.log(my$("zz").nextElementSibling);

//属性的节点
console.log(my$("dv").getAttributeNode("id").nodeType);

var chil = my$("dv").children;
for(var i=0; i<chil.length;i++){
//得到所有的p标签
if(chil[i].nodeName=="P"){
chil[i].style.background="pink";
}
}
  • 补充：如果字符串中有变量 外边是双引号里面也有双引号 是单引号里面也是单引号 如果里面没有bianliang外边双里面单

元素创建的三种方式：

  • document.write(“标签的代码以及内容”)；
    • 在加载完毕后使用这个方法创造会导致页面所有元素都没了 只有创造的这 个元素（比如点击后创造）
    • 如果在加载前创造就不会有这种情况
    • 不过可以在里面嵌入一些外部的小广告
  • document.innerHtml=“标签的代码及内容”；
    • 这个创造的方式是赋值的方式 刷新一次赋值一次
    • 如果在body里面创建会像write方法一样 所有元素都没了
  • document.createElement(“标签的名字”)；
    • 创建出来要添加 document.getElementById.appendChild(创建节点接收的名字)
document.getElementById("creat").onclick = function () {
//创建一个节点p
var obj = document.createElement("p");
//给这个元素添加内容
obj.innerHTML = "dasf";
//把这个创建好的p添加到指定的元素中
document.getElementById("dv").appendChild(obj);
}

appendChild(元素)追加元素

insertBefore(添加的元素，添加在谁前面的元素) 插入元素

removeChild（删除元素）

<body>
<input type="button" id="btn" value="添加按钮">
<input type="button" id="btn2" value="替换按钮">
<input type="button" id="btn3" value="删除按钮">
<input type="button" id="btn4" value="删除所有按钮">
<div id="dv"></div>
</body>
<script>
function my$(id){
return document.getElementById(id);
}
var i=0;
my$("btn").onclick = function(){
var btn = document.createElement("input");
btn.type="button";
i++;
btn.value="按钮"+i;
// my$("dv").appendChild(btn);
//添加到最前面
my$("dv").insertBefore(btn,my$("dv").firstElementChild);
}
my$("btn2").onclick = function(){
my$("dv").insertBefore(my$("dv").lastElementChild,my$("dv").firstElementChild);
}
my$("btn3").onclick = function(){
my$("dv").removeChild(my$("dv").firstElementChild);
}
my$("btn4").onclick = function(){
while(my$("dv").firstElementChild){
my$("dv").removeChild(my$("dv").firstElementChild);
}
}
</script>

为元素绑定事件（DOM）

  • addEventListener(“事件类型”，函数，bool) 第三个参数可以控制事件阶段 this指向的是当前对象
    • 因为原本的事件是不加on的 因为ie加的所以就有on了
    • 但是这个方法的事件类型不加昂 所有这个方法ie不支持
  • attachEvent(on+“事件类型”函数)
    • IE支持的方法 谷歌跟火狐不支持 IE11不支持 this指向的是window
  • onclick=函数 只能为一个对象绑定一个相同的事件 几个相同事件会被最后一个覆盖掉
my$("btn").addEventListener("click",function(){
console.log("dags");
},false);
my$("btn").attachEvent("onclick",function(){
console.log("sdfa");
})

解绑事件

  • 用什么样的方式绑定就用什么样的方式解绑
  • 元素.addEventListener(“事件类型”，函数，bool)绑定
  • 解绑事件 元素.removeEventListener("click",add,false);
 function add(){
console.log("我是绑定按钮监听事件 支持谷歌 火狐 ie11");
}
my$("btn3").addEventListener("click",add,false);
my$("btn4").onclick=function(){
my$("btn3").removeEventListener("click",add,false);
}
  • 元素.attachEvent("onclick",att);绑定
  • 解绑事件 元素.detaachEvent("onclick",att);
function att(){
console.log("我是给元素绑定时间的函数 支持ie8");
}
my$("btn5").attachEvent("onclick",att);
my$("btn4").onclick=function(){
my$("btn6").detachEvent("onclick",att);
}

事件冒泡：多个元素嵌套，有层次关系并且这些元素都注册相同的事件，当里面的事件触发了，外面的事件也会触发

e:事件处理参数对象
  • 事件处理函数中的参数 在事件触发的时候有的 没显示 不代表没有 是个对象 在火狐 谷歌中有这个参数 在ie中没有
  • window.event相当于e 都是事件处理对象
阻止冒泡
  • window.event.cancelBubble=true
  • e.stopPropagation()
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
my$("dv1").onclick=function(){
console.log(this.id);
}
my$("dv2").onclick=function(){
console.log(this.id);
//现在都支持 之前的谷歌 火狐不支持 在ie中么有e这个事件处理参数对象
window.event.cancelBubble=true;
}
//事件处理函数自带一个参数 只是没有显示出来 事件触发的时候的参数
//e=window.event 窗口事件
my$("dv3").onclick=function(e){
console.log(this.id);
//火狐 谷歌 ie11支持 e是个对象
e.stopPropagation();
}
</script>
事件阶段：
  • 事件分为三个阶段 使用e.eventPhase查看 一般为冒泡阶段 并且1和3不能共存 - 因为是e.addEventListener()的第三个参数决定的 -
  • e.addEventListener(“事件类型”,“处理函数”，“控制时间阶段”) -e.addEventListene的第三个参数为false的时候冒泡阶段 为true是捕获阶段
    • e.eventPhase当结果为1的时候 捕获阶段 从外向内 相当于警察抓小偷 -为2的时候 目标阶段 点击谁谁就是目标 -为3的时候冒泡阶段 从内向外
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
//ele.addEventListener("事件类型","事件处理函数","控制事件阶段")
//为false是冒泡排序 从内向外 相当于人进入房间
//为true是捕获排序 从外向内 相当于经拆抓小偷
//e.eventPhase是查看事件处在的阶段
//当为1的时候 捕获阶段
//为2 目标阶段 点击谁谁就是目标
//为3 冒泡阶段
//捕获阶段和冒泡阶段是不能共存的 当fasle时是冒泡true是捕获 一般默认WWI冒泡
//window.event和e都是事件处理对象 window.event是ie的标准 e是火狐的标准
var obj= [my$("dv1"),my$("dv2"),my$("dv3")];
//forEach是ecmascript5的规范 因此低版本的支持不了 复制mdn上的兼容代码就行了
obj.forEach(function(ele){
ele.addEventListener("click",function(e){
console.log(this.id+'----'+e.eventPhase);
},true);
})
</script>
为同一个元素绑定不同的事件 并且是同一个处理函数
<input type="button" id="btn" value="绑定不同的事件">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = eventFun;
my$("btn").onmouseover = eventFun;
my$("btn").onmouseout = eventFun;
function eventFun(e) {
switch (e.type) {
case "click":
alert("我是点击事件");
break;
case "mouseover":
this.style.background = "pink";
break;
case "mouseout": 
this.style.background = ""; 
break;
}
}
</script>
avatar
文章
阅读
粉丝