首页 > 其他 > 详细

节点操作、元素创建和事件操作

时间：2020-10-15 22:09:21      阅读：33      评论：0      收藏：0      [点我收藏+]

节点操作

节点属性:

nodeType

节点的类型:

1:标签

2:属性

3:文本

nodeName

节点的名字

标签节点：大写的标签名字

属性节点：小写的属性名字

文本节点：#text

nodeValue

节点的值：

标签节点：null

属性节点：属性值

文本节点：文本内容

案例
案例获取相关节点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<div id="dv">
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>
<script src="common.js"></script>
<script>
   /*
        凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
        凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
        从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持*/
    
  var ulObj=my$("uu");
  console.log(ulObj.parentNode);//div
  console.log(ulObj.parentNode.parentNode);//body
  console.log(ulObj.parentNode.parentNode.parentNode);//html
  console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document
  console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null
?
//  //ul标签的父级节点
//  console.log(ulObj.parentNode);
//  //ul标签的父级元素
//  console.log(ulObj.parentElement);
//
//  console.log(ulObj.parentNode.nodeType);//标签的---1
//  console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
//  console.log(ulObj.parentNode.nodeValue);//标签---null
</script>
</body>
</html>

 

 

元素创建的3种不同方式

    1. document.write("标签的代码及内容");

    1. 对象.innerHTML="标签及代码";

    1. document.createElement("标签的名字");

1.document.write()

一般不用，会将页面所有内容干掉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
  //document.write("标签代码及内容");
  my$("btn").onclick=function () {
    document.write("<p>这是一个p</p>");
  };
 // document.write("<p>这是一个p</p>");
?
  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
</script>
</body>
</html>
2.对象.innerHTML

会将对象中的内容覆盖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:2px solid pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,在div中创建一个p标签
  //第二种方式创建元素: 对象.innerHTML="标签代码及内容";
?
  my$("btn").onclick=function () {
    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
  };
</script>
</body>
</html>
3.document.createElement();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      border: 2px dashed pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //第三种方式创建元素
  //创建元素
  //document.createElement("标签名字");对象
  //把元素追加到父级元素中
  //点击按钮,在div中创建一个p
?
  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };
</script>
</body>
</html>

 

 

元素事件绑定

为元素绑定多个点击事件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
?
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
  //为元素绑定事件(DOM):一种,但是不兼容,有两种
  //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
  //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
?
  //为按钮绑定点击事件
  //参数1:事件的类型---事件的名字,没有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)
  //参数3:布尔类型,目前就写false
  // >> false：为冒泡阶段，true：为捕获阶段
?
  //为同一个元素绑定多个相同的事件
  //google，FireFox支持的方式
  my$("btn").addEventListener("click",function () {
    console.log("小苏猥琐啊");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("小苏龌龊啊");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("小苏邪恶啊");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("小苏下流啊");
  },false);
?
?
  //IE-8
  my$("btn").attachEvent("onclick",function () {
    console.log("小杨好帅哦1");
  });
?
  my$("btn").attachEvent("onclick",function () {
    console.log("小杨好帅哦2");
  });
?
  my$("btn").attachEvent("onclick",function () {
    console.log("小杨好帅哦3");
  });
?
?
</script>
</body>
</html>

　　

绑定事件浏览器的兼容性代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
?
  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
?
  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });
?
?
//  my$("btn")["on"+"click"]=function () {
//
//  };
?
//  function Person(name) {
//    this.name=name;
//    this.sayHi=function () {
//      console.log("您好啊");
//    };
//  }
?
//  var per=new Person("小明");
//  if(per.sayHii){//判断这个对象中有没有这个方法
//    per.sayHii();
//  }else{
//    console.log("没有这个方法");
//  }
?
</script>
</body>
</html>

　　

绑定事件的区别

addEventListener()和attachEvent()

相同点

都可以为元素绑定事件

不同点

addEventListener

addEventListener三个参数

addEventListener 谷歌,火狐,IE11支持,IE8不支持

addEventListener 中的this是当前绑定事件的对象

addEventListener中事件的类型(事件的名字)没有on

attachEvent

attachEvent两个参数

attachEvent 谷歌火狐不支持,IE11不支持,IE8支持

attachEvent中的this是window

attachEvent中的事件的类型(事件的名字)有on

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
?
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").addEventListener("click",function () {
    console.log(this);
  },false);
?
  my$("btn").attachEvent("onclick",function () {
    console.log(this);
  });
?
</script>
</body>
</html>

　　

 

解绑事件

用什么方式绑定事件,就应该用对应的方式解绑事件

第一种解锁方式

对象.on事件名字=事件处理函数

my$("btn").onclick=null;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
?
</head>
<body>
<input type="button" value="小苏" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
  // 1 对象.on事件名字=事件处理函数----绑定事件
  my$("btn").onclick=function () {
    console.log("我猥琐");
  };
  my$("btn2").onclick=function () {
    //1.解绑事件
    my$("btn").onclick=null;
  };
?
</script>
</body>
</html>
第二种解锁方式

对象.addEventListener

my$("btn").removeEventListener("click",f1,false);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
?
</head>
<body>
<input type="button" value="小苏" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  my$("btn").addEventListener("click",f1,false);
  my$("btn").addEventListener("click",f2,false);
?
  //点击第二个按钮把第一个按钮的第一个点击事件解绑
  my$("btn2").onclick=function () {
    //解绑事件的时候,需要在绑定事件的时候,使用命名函数
    my$("btn").removeEventListener("click",f1,false);
  };
?
</script>
?
</body>
</html>
第三种解锁方式

对象.attachEvent

my$("btn").detachEvent("onclick",f1);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
?
</head>
<body>
<input type="button" value="小苏" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  my$("btn").attachEvent("onclick",f1);
  my$("btn").attachEvent("onclick",f2);
?
  my$("btn2").onclick=function () {
      my$("btn").detachEvent("onclick",f1);
  };
?
</script>
?
</body>
</html>

绑定事件的兼容性代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>

  //绑定事件的兼容
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
  //解绑事件的兼容
  //为任意的一个元素,解绑对应的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };

</script>
</body>
</html>

 

事件冒泡

多个元素嵌套,有层次关系,这些元素都注册了相同的事件

如果里面的元素的事件触发了,外面的元素的该事件自动的触发了

由里向外触发

阻止事件冒泡

window.event.cancelBubble=true

IE特有的,谷歌支持,火狐不支持

e.stopPropagation()

谷歌和火狐支持

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1{
      width: 300px;
      height: 200px;
      background-color: red;
    }
    #dv2{
      width: 250px;
      height: 150px;
      background-color: green;
    }
    #dv3{
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
    
<script src="common.js"></script>
<script>

  //事件冒泡,阻止事件冒泡,
  //如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

  // e.stopPropagation(); 谷歌和火狐支持,

  my$("dv1").onclick=function () {
    console.log(this.id);
  };
  my$("dv2").onclick=function () {
    console.log(this.id);
    //window.event.cancelBubble=true;
  };
  //事件处理参数对象
  my$("dv3").onclick=function (e) {
    console.log(this.id);
    //阻止事件冒泡
    //e.stopPropagation();

    console.log(e);
  };

//  document.body.onclick=function () {
//      console.log("颤抖吧,你们这些愚蠢的标签");
//  };

</script>
</body>
</html>

事件捕获

由外向里触发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }
?
    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }
?
    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script>
?
    //事件有三个阶段:
    /*
     *
     * 1.事件捕获阶段  :从外向内
     * 2.事件目标阶段  :最开始选择的那个
     * 3.事件冒泡阶段  : 从里向外
     
     
     * 事件的阶段有三个:
     * 1---->捕获阶段
     * 2---->目标阶段
     * 3---->冒泡
     
     * 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
?
     * 一般默认都是冒泡阶段,很少用捕获阶段
     * 冒泡阶段:从里向外
     * 捕获阶段:从外向内
     * */
      
?
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script src="common.js"></script>
<script>
  //事件冒泡:是从里向外
?
  //同时注册点击事件
  var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
  //遍历注册事件
  objs.forEach(function (ele) {
    //为每个元素绑定事件
    ele.addEventListener("click", function (e) {
      console.log(this.id+"====>"+e.eventPhase);
?
    }, true);
?
  });
    
  //该属性在事件参数对象中存在
?
</script>
</body>
</html>

　　

节点操作、元素创建和事件操作

原文：https://www.cnblogs.com/minnersun/p/13822534.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！