【学习笔记】:DOM对象及事件绑定

目录
  • 一、DOM的概念
  • 二、DHTML与HTML DOM
  • 三、Document对象
    • 获取元素方法
  • 四、Element对象
    • 与属性相关方法
  • 五、对DOM对象的操作
    • 1、DOM对象的属性
    • 2、创建元素
    • 3、挂载元素
    • 4、删除元素
    • 5、克隆元素
  • 六、调整元素样式的方式
  • 七、Event对象
    • 1、常见的几类事件
      • 点击事件
      • 焦点事件
      • 加载事件
      • 鼠标事件
      • 键盘事件
      • 选中和改变事件
      • 表单事件
    • 2、绑定事件的几种方法

一、DOM的概念

DOM的英文全称是 Document Object Model,即文档对象模型,是用以操作HTML文档和XML文档的API。

W3C将DOM分为三个不同的部分,分别是:核心DOM,XML DOM,HTML DOM。

二、DHTML与HTML DOM

所谓DHTMLDynamic HTML,是动态的HTML

这门技术可以使用客户端脚本语言,利用HTML DOM 控制HTML的元素,将静态的HTML内容变成动态。


本篇主要是对HTML DOM的学习总结。

HTML DOM可以把HTML文档看作一棵节点树,可以利用DOM对象的属性或方法对这些节点进行增删改查的操作。

三、Document对象

Document对象代表载入浏览器的HTML文档,可以通过全局对象Window获得Document对象。

获取元素方法

getElementById(id值):根据id值获取一个元素。

getElementsByName(name值):根据name值获取一个元素数组。

getElementsByTagName(tagName值):根据标签名获取一个元素数组。


在HTML DOM中,每个部分都是节点:文档本身,元素,属性,注释都是节点。

四、Element对象

Element对象代表文档中的元素,可以通过Document的许多方法获取。

与属性相关方法

setAttribute(属性名,属性值):将第一个input标签的type属性设置为button。

document.getElementByTagName("input")[0].setAttribute("type","button");

removeAttribute(属性名):将id为"city"的元素的style属性移除。

document.getElementById("city").removeAttribute("style");

五、对DOM对象的操作

增删改查。

1、DOM对象的属性

innerHTML:元素(节点)的文本值。

parentNode:元素(节点)的父节点。

childNodes:元素(节点)的子节点。

2、创建元素

document.createElement("节点类型");//为指定的标签创建一个元素的实例。

3、挂载元素

parentElement.appendChild(childElement);//在父元素最后位置添加子元素。
parentElement.insertBefore(newElement,oldElement);//将元素作为父对象的子元素插入其中。

4、删除元素

parentElement.removeChild(chileElement);//删除父元素的指定子元素。

5、克隆元素

newElement = oldElement.cloneNode(boolean);//默认为false,即不克隆节点中的子节点。

六、调整元素样式的方式

直接利用元素的style属性节点设置。

    
        
        Title
        
    
    
        

hello

实现定义类选择器的样式,点击事件触发时,更改其className值即可。

    
        
        Title

        
        
    
    
        

hello

七、Event对象

Event对象代表事件的状态:如鼠标的位置,鼠标是否点击,键盘是否按下等等。

通常与函数结合使用,且函数不会再事件发生前执行。

1、常见的几类事件

点击事件

  • onclick:单击事件
  • ondbclick:双击事件

焦点事件

  • onblur:失去焦点,一般用于表单校验。
  • onfocus:获得焦点。

加载事件

  • onload:图片或页面加载完成。

鼠标事件

  • onmousedown:鼠标按下。
  • onmouseup:鼠标松开。
  • ommousemove:鼠标移动。
  • onmouseover:鼠标移到元素上。
  • onmouseout:鼠标从元素上移开。

键盘事件

  • onkeydown:键盘按下。
  • onkeyup:键盘松开。
  • onkeypress:键盘按下并松开。

选中和改变事件

  • onchange:域的内容被改变
  • onselect:文本被选中

表单事件

  • onsubmit :提交表单按钮被点击。(事件绑定的函数返回false则表单将会被阻止提交)

  • onreset:重置按钮被点击。

2、绑定事件的几种方法

直接在HTML标签上,指定事件的属性,属性值即为js代码)。


    
        
        Title
        
    
    
        

hello

通过DOM元素对象与匿名方法指定实现属性。


    
        
        Title
        
    
    
        

hello

还有其他的方法,以后遇到的时候再做总结。


参考:W3School

你可能感兴趣的:(【学习笔记】:DOM对象及事件绑定)