码迷,mamicode.com
首页 > Web开发 > 详细

JS---DOM---part4 课程介绍 & part3 复习

时间:2019-12-10 15:27:09      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:for   同事   create   before   append   复习   stc   fun   内容   

part4 课程介绍

事件
1. 绑定事件的区别
2. 移除绑定事件的方式及区别和兼容代码
3. 事件的三个阶段
4. 事件冒泡
5. 为同一个元素绑定多个不同的事件,指向的是同一个事件处理函数
6. 百度的大项目
7. BOM
8. 定时器
9. DOM加强,多个几个好玩的案例
 

 

part3 复习

节点:

  节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
  文档:document---页面中的顶级对象
  元素:页面中所有的标签,   标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
 
  节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
  节点的类型:1标签节点,2属性节点,3文本节点
 
  nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
  nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
  nodeValue:标签---null,属性---属性的值,文本---文本内容
  if(node.nodeType==1&&node.nodeName=="P")

  获取节点及元素的代码(下面呢)


  元素的创建

  三种元素创建的方式
  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;
      }
    }

 

获取节点及元素的代码

  //获取当前节点的父级节点
    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);

 

JS---DOM---part4 课程介绍 & part3 复习

标签:for   同事   create   before   append   复习   stc   fun   内容   

原文地址:https://www.cnblogs.com/jane-panyiyun/p/12016427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!