复习:

1.1 DOM:Docment Object Model  文档对象模型

当页面加载时,就会创建文档对象模型。文档对象模型被构造为DOM树;

DOM树种任何一个部分都可以看做是节点对象,结构中的html元素、属性、文本、注释等都是节点。

1.2 节点属性

nodeType 节点类型

元素节点 - 1

属性节点 - 2

文本节点 - 3

注释节点 - 8

文档节点 - 9

nodeName  节点名称

nodeValue  含有文本的节点才有节点值

1.3 节点层级访问

firstChild  第一个子节点

firstElementChild  第一个子元素节点

lastChild

lastElementChild

childNodes  所有子节点

childElements  所有子元素节点

parentNode  获取父节点

parentElement 获取父元素

nextSibling 下一个兄弟节点

nextElementSibling 下一个兄弟元素

previousSibling 上一个兄弟节点

previousElementSibling 下一个兄弟元素

1.4 document属性

document.documentElement

document.body

document.title

document.cookie

1.5 获取元素的方式

getElementById()

getElementsByClassName()

getElementsByTagName()

getElementsByName()

1.6 设置和获取html属性

对象的方式   obj.att  或   obj[“att”]

get/set  getAttribute(“att”)   setAttribute(“att”,”value”)

get/set方式可以自定义属性(data-)显示到结构中,对象自定义属性只能在js中使用

1.7 设置和获取css样式

行内式添加的样式:

对象的方式

ele.style.prop =“单个样式”

ele.style = “多个样式”

ele.style.cssText = “多个 样式”

get/set方式

setAttribute(‘style’,”样式”)

非行内式获取样式

非IE8及以下版本浏览器,使用window.getComputed(element,null)

IE8及以下浏览器版本,使用element.currentStyle =

兼容性写法:

function getOuterStyle(ele,att){

if(window.getComputed){

return window.getComputed(ele,null)[att];

}else{

return ele.currentStyle[att];

}

}

1.8 事件

事件是用户或者浏览器的行为;通过函数进行捕获,执行相应的操作;

一旦有了事件,会自动生成事件对象,存储事件对象相关的详细信息。

窗口事件

window.onload  结构或图片加载完成后,执行的事件

window.onscroll 窗口滚动条事件

window.onresize 窗口改变事件

键盘事件

onkeydown  键盘被按下

onkeyup 键盘按键被松开

onkeypress 键盘按键按下并松开  不支持功能键  大小写获取的键盘码不一致

keyCode

鼠标事件

onclick  单击事件

ondblclick 双击事件

oncontextmenu 右键事件

onmouseover / onmouseenter 鼠标滑过

onmouseout/onmouseleave 鼠标离开

onmousedown 鼠标按下

onmouseup 鼠标松开

onmousemove 鼠标移动

表单事件

onfocus 获取焦点

onblur 失去焦点

onchange 表单改变

onselected 选中事件

oninput 正在输入事件

onsubmit 表单提交

onreset 表单重置

提交和重置需要元素form驱动

部分DOM事件总结的更多相关文章

  1. DOM 事件深入浅出(二)

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  2. DOM 事件深入浅出(一)

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  3. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. 你真的了解DOM事件么?

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  6. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  7. dom事件与event对象总结

    1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间.    tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序.        事件 ...

  8. DOM事件简介--摘自admin10000

    Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...

  9. 从click事件理解DOM事件流

    事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...

  10. DOM事件机制进一步理解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  2. 使用穷举法结合numpy解决八皇后问题

    一般说到八皇后问题,最先想到的就是回溯思想,而回溯思想往往是需要递归来实现的. 计算机很善长做重复的事情,所以递归正和它的胃口,而我们人脑更喜观平铺直叙的思维方式.当 我们看到递归时,总想把递归平铺展 ...

  3. 手把手搭建K3cloud插件开发环境

    最近几天在配置K3cloud开发环境,发现不论是产品论坛还是百度出来的结果,都不够满意,很多大咖给提供的环境搭建手册都是那个云山雾罩的PPT 也就是这个open.kingdee.com/K3Cloud ...

  4. SpringCloud 教程 (三)高可用的服务注册中心

    一.准备工作 Eureka can be made even more resilient and available by running multiple instances and asking ...

  5. 小程序cover-view

    cover-view包裹的元素设置定位,元素内容长短会影响cover-view的位置,即使设置的left,top一致 最佳解决方法,就是给cover-view设置宽度

  6. Csharp随机生成序列码的方式Guid方法

    主要用于邮箱激活,加密等用处 Guid.NewGuid().ToString()得几种格式显示 .Guid.NewGuid().ToString("N") 结果为: 38bddf4 ...

  7. [CSP-S模拟测试]:梦境(贪心+小根堆)

    题目描述 智者奥尔曼曾说过:有缘的人即使相隔海角天涯,也会在梦境中相遇. $IcePrince\text{_}1968$和$IcePrincess\text{_}1968$便是如此.有一天$IcePr ...

  8. create react app的 css loader 进行局部配置

    { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnv ...

  9. 圆角Panel

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Diagnostic ...

  10. python-笔记-内置函数

    ###内置函数 print(all([1,2,3,4]))判断可迭代的对象里面的值是否都为真 print(any([0,1,2,3,4]))判断可迭代的对象里面的值是否有一个为真 print(id(l ...