当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS---DOM---part4 课程介绍 & part3 复习

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

2019年12月10日  | 移动技术网IT编程  | 我要评论

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网