前端

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

云博小周宇1 Min Read

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