DOM学习第四天

最新推荐文章于 2024-01-19 08:44:45 发布
最新推荐文章于 2024-01-19 08:44:45 发布
阅读量111 收藏
点赞数
分类专栏： 前端学习

DOM学习_第四天

回顾上节

  1. 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
    文档：document—页面中的顶级对象
    元素:页面中所有的标签, 标签—元素–对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)

  2. 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素

  3. 节点的类型:1标签节点,2属性节点,3文本节点
    nodeType:节点的类型,1—标签节点,2—-属性节点,3—文本节点
    nodeName:标签节点–大写的标签名字,属性节点—小写的属性名字,文本节点—#text
    nodeValue:标签—null,属性—属性的值,文本—文本内容

  4. 获取节点及元素：12行代码
//获取当前节点的父级节点
    console.log(my$("uu").parentNode);
    //获取当前节点的父级元素
    console.log(my$("uu").parentElement);
    //获取当前节点的子级节点
    console.log(my$("uu").childNodes);
    //获取当前节点的子级元素
    console.log(my$("uu").children);


    //获取当前节点的第一个子级节点
    console.log(my$("uu").firstChild);
    //获取当前节点的第一个子级元素
    console.log(my$("uu").firstElementChild);
    //获取当前节点的最后一个子级节点
    console.log(my$("uu").lastChild);
    //获取当前节点的最后一个子级元素
    console.log(my$("uu").lastElementChild);
    //获取当前节点的前一个兄弟节点
    console.log(my$("uu").previousSibling);
    //获取当前节点的前一个兄弟元素
    console.log(my$("uu").previousElementSibling);
    //获取当前节点的后一个兄弟节点
    console.log(my$("uu").nextSibling);
    //获取当前节点的后一个兄弟元素
    console.log(my$("uu").nextElementSibling);

  1. 三种元素创建的方式

    1. document.write(“标签代码及内容”); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
    2. 父级对象.innerHTML=”标签代码及内容”;
    3. document.createElement(“标签名字”);得到的是一个对象,

    父级元素.appendChild(子级元素对象);
    父级元素.inerstBefore(新的子级对象,参照的子级对象);
    移除子元素
    父级元素.removeChild(要干掉的子级元素对象);

    事件的绑定:为同一个元素绑定多个相同的事件

    1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
      my$("btn").onclick=function(){};
 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);

    my$("btn").addEventListener("click",function(){},false);
 3. 对象.attachEvent("有on的事件名字",事件处理函数);

    my$("btn").attachEvent("onclick",function(){});

为任意一个元素绑定任意一个事件

 //为任意的一个元素,绑定任意的一个事件
    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;
      }
    }

今日主要内容

  1. 绑定事件的区别
  2. 移除绑定事件的方式及区别和兼容代码
  3. 事件的三个阶段
  4. 事件冒泡
  5. 为同一个元素绑定多个不同的事件,指向的是同一个事件处理函数
  6. 百度的大项目

总结绑定事件的区别:
addEventListener();
attachEvent()
相同点: 都可以为元素绑定事件
不同点:
1.方法名不一样
2.参数个数不一样addEventListener三个参数,attachEvent两个参数
3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
4.this不同,addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
5.addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on
01_为元素解绑

<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;
 };

 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);
 };
  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);
  };
  //解绑事件:
  /*
  * 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
  * 1.解绑事件
  * 对象.on事件名字=事件处理函数--->绑定事件
  * 对象.on事件名字=null;
  * 2.解绑事件
  * 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
  * 对象.removeEventListener("没有on的事件类型",函数名字,false);
  * 3.解绑事件
  * 对象.attachEvent("on事件类型",命名函数);---绑定事件
  * 对象.detachEvent("on事件类型",函数名字);
  * */
</script>
</body>

02_绑定事件的兼容和解绑事件的兼容

<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>

03_事件冒泡

<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>
    //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了
  </script>
</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>

04_事件阶段

<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.事件冒泡阶段  : 从里向外
     //  为元素绑定事件
     //  addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
     //  事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
      // window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
     //  window.event就是一个对象,是IE中的标准
     //  e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
     //  window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
     // * 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
     //  addEventListener中第三个参数是控制事件阶段的
     //  事件的阶段有三个:
     //  通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
     //  如果这个属性的值是:
     //  1---->捕获阶段
     //  2---->目标阶段
     //  3---->冒泡
     //  一般默认都是冒泡阶段,很少用捕获阶段
     //  冒泡阶段:从里向外
     //  捕获阶段:从外向内

  </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>

05_为同一个元素绑定多个不同的事件,指向相同的事件处理函数

<body>
<input type="button" value="小苏" id="btn"/>
<script src="common.js"></script>
<script>
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帅哦");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }
  //  my$("btn").onmouseover=function (e) {
  //    console.log(e);
  //  };
</script>
</body>

06_模拟百度搜索

 <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }
    #txt {
      width: 350px;
    }
    #pop {
      width: 350px;
      border: 1px solid red;
    }
    #pop ul {
      margin: 10px;
      padding: 0px;
      width: 200px;
      list-style-type: none;
    }
    #pop ul li {
    }
  </style>
</head>
<body>
<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
  var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
  //获取文本框注册键盘抬起事件
  my$("txt").onkeyup = function () {
    //每一次的键盘抬起都判断页面中有没有这个div
    if(my$("dv")){
      //删除一次
      my$("box").removeChild(my$("dv"));
    }
    //获取文本框输入的内容
    var text = this.value;
    //临时数组--空数组------->存放对应上的数据
    var tempArr = [];
    //把文本框输入的内容和数组中的每个数据对比
    for (var i = 0; i < keyWords.length; i++) {
      //是否是最开始出现的
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);//追加
      }
    }
    //如果文本框是空的,临时数组是空的,不用创建div
    if (this.value.length == 0 || tempArr.length == 0) {
      //如果页面中有这个div,删除这个div
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }
      return;
    }
    //创建div,把div加入id为box的div中
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    //dvObj.style.height="100px";//肯定是不需要的------
    dvObj.style.border = "1px solid green";
    //循环遍历临时数组,创建对应的p标签
    for (var i = 0; i < tempArr.length; i++) {
      //创建p标签
      var pObj = document.createElement("p");
      //把p加到div中
      dvObj.appendChild(pObj);
      setInnerText(pObj, tempArr[i]);
      pObj.style.margin = 0;
      pObj.style.padding = 0;
      pObj.style.cursor = "pointer";
      pObj.style.marginTop = "5px";
      pObj.style.marginLeft = "5px";
      //鼠标进入
      pObj.onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }
  };
</script>
</body>
qq_28935057
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
insertBefore的用法
Meskjei的博客
04-09 3万+
文章目录简介用法参数注意的地方 简介 inserBefore，顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法是： Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点 而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。 如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当...
web前端JS（DOM）学习第三十一天
StarAh的博客
04-15 831
web前端JS（DOM）学习第三十一天
JS第四天
飞翔的小白
08-28 154
JS第三天复习：  * 节点:      * 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)      * 文档：document---页面中的顶级对象      * 元素:页面中所有的标签,   标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)      * 节点的属性:作用:为了将来获取很多节点,得到节点中的标签...
JS DOM基础以及元素创建的三种方式
sunhaomei的博客
05-14 2674
节点：页面中所有的内容都是节点（标签，属性，文本，空格，换行） 文档：document---页面中的顶级对象 元素：页面中的所有标签 标签---元素---对象（通过DOM的方式来获取这个标签，得到了这个对象，此时这个对象叫DOM对象） 节点的属性：作用，为了将来获取很多节点，得到节点中的标签（元素），识别节点中的标签元素 节点的类型：1标签节点，2属性节点，3文本节点 nodeTyp...
JavaScript—DOM学习
weixin_50735831的博客
08-08 417
dom基础学习
Vue.js学习总结第四天
JavaAlliance
05-02 574
Vue.js学习总结第四天 一、动画中transition-group的使用 transition-group 的主要作用是给其子元素设定一个统一的过渡样式（统一的动画样式），而不需要给每单 个元素都用 transition 包裹起来 和 transition 标签不一样，transition-group 不是一个虚拟 DOM，会真实渲染在 DOM 树中。默认会是 span 标签，如下图所示，很...
（黑马程序员）JavaScript DOM和BOM第一天学习笔记
LuShanGuoQiLin的博客
08-17 448
DOM是用来呈现以及与任意HTML或XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能DOM作用：开发网页内容特效和实现用户交互。
【学习前端第三十四课】 DOM操作样式
weixin_65729202的博客
01-19 913
1、如果过要对某一个元素设置css样式，我们可以使用style属性去设置2、如果要获取一个元素的css样式信息，我们可以使用方法，这个方法可以获取当前元素计算之后的所有的样式信息，但是不能赋值3、如果我们要修改内部样式或外部样式表的样式，或新增，或删除，则需要使用到操作内部样式的style标签或外部样式link标签4、如果我们要对某一个元素添加或删除一个class，我们使用classList属性那些看似波澜不惊的日复一日，总有一天会看到坚持的意义，希望这篇博客能帮到你吖ଘ(੭ˊ꒳ˋ)੭✧。
DOM学习总结
Bigbao_man的博客
07-28 843
DOM学习总结 主要内容 1、查找元素 2、修改元素 3、添加和删除元素 4、HTML DOM常用对象 1.查找/获取元素 1.1 可直接获取元素 document.documentElement //获得<html>元素 document.head //获得<head>元素 document.body //获得<body>元素 document.forms[i] //获得<form>元素 1.2 按节点间关系查找 节点树 父子
前端技术学习第四讲：JavaScript中DOM和BOM
跟着老高学Java
03-27 1644
JavaScript中DOM和BOM 一、DOM和BOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。 BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可
JavaScript DOM学习第四章 getElementByTagNames
12-11
getElementByTagNames（注意是复数的names）会获得一些tag的元素，然后按照他们的顺序保存在一个数组中。这非常的有用，比如在上一章的TOCScript中，就需要获得整个文章里面的所有的H3和H4。 我非常希望在node原型中...
JavaScript DOM学习第六章 表单实例
01-21
onSubmit的代码做了两件事情：检查你是否在四个文本框里面都填写了数据，然后把所有的元素都连接起来打印在下面的文本区域中。 原文中有实例，需要童鞋请移步，我就不搬过来了。 检测文本区域 这段代码会检测用户...
JavaScript DOM 学习第三章 内容表格
10-29
在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表，然后给他们添加一个链接。
Dom 学习总结以及实例的使用介绍
09-05
以下是一些关于DOM学习的关键知识点： 1. **DOM操作**： - `document.createElement()`：创建一个新的HTML元素。 - `document.getElementById()`：根据ID查找元素。 - `document.querySelector()`和`document....
2024年公关服务行业分析报告.pptx
07-09
行业报告
惠州市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
Matlab语言教程及案例
07-09
项目总结 本文详细介绍了Matlab的基础知识和一个完整的数据分析与可视化案例。内容包括： 1. **基本操作**：基本算术运算和矩阵操作。 2. **绘图**：二维和三维绘图。 3. **函数和脚本**：编写和运行Matlab函数和脚本。 4. **案例分析**：生成模拟数据，进行数据预处理、绘图和统计分析。 通过这个项目，读者可以掌握Matlab的基本使用方法，并了解如何在Matlab中进行数据分析和可视化。这对于初学者入门Matlab编程、提升数据处理和分析能力非常有帮助。希望本文能为读者提供有价值的参考，提升其Matlab编程和数据分析技能。
KB8825英文数据手册
07-09
三星KB8825英文数据手册
述职报告（08）PPT模板.pptx
07-09
述职报告（08）PPT模板.pptx
javascript dom 编程艺术(第2版)
08-13
通过阅读《JavaScript DOM 编程艺术（第2版）》，读者可以系统地学习JavaScript和DOM的相关知识，并掌握如何将其应用到实际的网页开发中。不仅能够提升读者的编程技能，还能够帮助读者理解现代Web开发的基本原理和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值