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

2021-05-11 18:29

阅读：588

标签：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

上一篇：CAD关于实体扩展记录操作（com接口网页版）

下一篇：VRChat模型制作及上传总篇(201912)

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JS---DOM---part4 课程介绍 & part3 复习
文章链接：http://soscw.com/index.php/essay/84367.html

亲，登录后才可以留言！

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

part4 课程介绍

part3 复习

节点:

元素的创建

评论

热门文章

推荐文章

最新文章

置顶文章

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

part4 课程介绍

part3 复习

节点:

元素的创建

评论

热门文章

推荐文章

最新文章

置顶文章

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