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

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

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

时间: 2024-10-06 17:13:33

JS---DOM---part4 课程介绍 & part3 复习的相关文章

Web API---DOM---part2复习和part3课程介绍

part2复习 阻止超链接默认的跳转事件: return false; 获取元素的方式 根据id获取元素 document.getElementById("id属性的值"); 根据标签名字获取元素 document.getElementsByTagName("标签的名字"); 有的浏览器不支持, IE低版本的浏览器不支持,IE8以下的 根据name属性的值获取元素 document.getElementsByName("name属性的值"); 根

JS---part5 课程介绍 & part4 复习

part5 课程介绍 另一个定时器 第一个定时器的小案例----练习 封装动画函数----------匀速的动画函数,过渡到=======>缓动的动画函数 简单的轮播图 左右焦点的轮播图 无缝连接的轮播图 轮播图======================================重点 三大系列中的第一个系列:offset系列================重点 封装缓动动画函数 筋斗云,固定导航栏 升级4到5个版本 手风琴 旋转木马 part4 复习 为元素绑定事件的三种方式: 1.对象

关于Node.js, Jade一点小小的介绍。

本文出自:http://blog.csdn.net/svitter node.js大家知道的可能比较多,但是jade大家可能就不知道了..GFW封杀掉google以后,今天在百度上找了好久也没有找到--哎,仍需前进. 肯定有在github上获取一些框架的小白和我一样,看了到了json,jade,less这些莫名奇妙的东西然后怅然不知所云. jade可以用来生成html文件,写法要简单很多.具体见:http://jade-lang.com/ 那么jade是什么呢?jade就是node 的一个框架,

原生javascript获取dom元素简单介绍

原生javascript获取dom元素简单介绍: 使用jQuery可以各种方式获取元素,比如id选择器,类选择器,元素选择器等等,非常的方便. 下面就介绍一下如何利用原生的js实现获取dom元素的功能. 一.通过id获取元素: 最方便的那就是使用document.getElementById()函数. 具体可以参阅document.getElementById()一章节. 二.通过标签获取元素: 使用document.getElementsByTagName()函数. 具体可以参阅documen

DOM和DHTML等,复习总结

DOM(Document Object Model),文件对象模型.HTML(HyperText Markup Language),超文本标记语言.HTML的超类:Node->Document:Node->Element->HTMLElement.HTML的元素:HTMLDocument/HTMLBodyElement/HTMLDivElement/HTMLFormElement/HTMLSelectElement/HTMLOptionElement/HTMLTableElement/H

JS Dom节点操作demo!

通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ return document.createElement(tagName); } var table = c('table'); var tbody = c('tbody'); table.appendChild(tbody); for(var i = 0;i<4;i++){ var tr = c(

Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa-router.mysql 2.课程亮点 1.项目前后端分离开发 Vue+koa2开发一款全栈小程序 2.完整流程,一步不少 注册小程序账号,前后端开发,打包,正式上线 2.小程序环境搭建 1.后台地址: https://mp.weixin.qq.com/ 2.文档地址: https://develo

JavaScript(JS)之简单介绍

JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0

WebGL/Three.js深度学习课程详解

课程介绍:适用于对WebGL.Three.js等3D技术感兴趣,却不知道如何入门的同学, 课程带领大家深入理解WebGL的原理. 课程目录:├─01-基础部分│      01-WebGL与three.js的基础.与opengl的关系.mp4│      02-编写第一个three.js程序.mp4│      03-three.js程序框架,绘制一条直线.mp4│      04-三维世界的组成(点.线).mp4│      05-坐标系的秘密(世界坐标.本地坐标).mp4│      06-