zoukankan      html  css  js  c++  java
  • 部分DOM事件总结

    复习:

    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驱动

  • 相关阅读:
    [分治FFT]「CTSC2018」青蕈领主
    [边分治+线段树合并]「CTSC2018」暴力写挂
    [模板]MTT
    [模板]NTT
    [矩阵求逆+二分图匹配]BZOJ 3168 [Heoi2013]钙铁锌硒维生素
    [BZOJ1925][SDOI2010]地精部落(DP)
    [BZOJ1047][HAOI2007]理想的正方形(RMQ+DP)
    [POJ3630]Phone List (Tire)
    [POJ1193][NOI1999]内存分配(链表+模拟)
    [POJ2823]Sliding Window 滑动窗口(单调队列)
  • 原文地址:https://www.cnblogs.com/lvlisn/p/11626333.html
Copyright © 2011-2022 走看看