javascript DOM

javascript DOM

什么是事件

html事件就是发生在html元素上的事情

下面是一些常见的html事件

onclick:用户点击了html元素

onmouseover:用户把鼠标移动到html元素上

onmouseout:用户把鼠标移开html元素

onkeydown:用户按下键盘按键

onload:浏览器已完成页面加载

onchang;html元素已被改变

onfocus:获得鼠标焦点

onblur:失去焦点

事件由三部分组成：事件源 事件类型 事件处理程序

事件源 事件被触发的对象

事件类型 如何触发 什么事件

事件处理程序 通过一个函数赋值的方式完成

什么是DOM

DOM是文档编辑模型，(document object model),用来处理可拓展标记语言的标准接口，通过dom接口可以改变网页的内容，结构与样式

dom相关名词

文档:一个页面就是一个文档

元素:页面的所有标签

节点：网页中的所有内容

dom把文档元素与节点都看成是对象，这样的话他们就都有自己的属性与方法

获取元素

获取元素只要有以下四种方法

• 根据ID获取
• 根据标签名获取
• HTML5新方法
• 特殊元素获取

根据ID获取

• 用document的方法getElementsById()//获得元素通过id,id是字符串，这里返回的是元素对象，console.dir()打印元素对象，可以查看里面的属性与方法

根据标签名获取

• 根据document的方法getElementsByTagName(),可以返回带有指定标签名的对象集合//返回的是伪数组
• 可以通过element.getElementsByTagName()来获取某个父元素内部所有指定标签名的子元素，注意：父元素必须为指明是哪个元素的对象，不能是伪对象，就像这样获取//这里变量写错了要把a 改成ul

用html5新增方法

• document.getElementsByClassName(’’)；根据类名返回元素对象集合
• document.querySelector(’’),根据指定选择器返回第一个元素对象，注意这里要加符号，class选择器.类名，id选择器#类名
• document.querySelectorAll(’’);根据指定选择器返回，这里也要加符号哦

获取特殊元素

• 获取body元素,语法document.body;
• 获取html元素，语法document.documentElement;

操作元素

常见元素的属性操作，操作元素步骤，获取事件源，确定事件类型，写出事件处理程序

• innerText修改元素的内容//属性赋值，不识别html标签，去除空格换行，innerHTML标签//识别html标签，语法element.innnerHTML = ‘html’;
• src,href
• id,alt,title

修改表单属性

利用dom可以操作type,checked,selected,disabled表单属性，这样使用

修改样式属性

获取设置删除自定义属性值

节点操作

节点包括nodeType(节点类型)，nodeName(节点名称),nodevalue(节点值)

元素节点nodeType为1

属性节点nodeType为2

文本节点的nodeType为3(换行是文本节点)

父级节点element.parentNode;返回的是离他最近的节点

子节点element.childNodes比较复杂不建议使用会包含换行文本节点，建议使用element.children；

兄弟节点因为会受到兼容性等影响，所以这里不赘述

如果我们想要页面添加一个新的元素：先创建元素再添加元素

创建节点document.createElement(’’);

添加节点parentnode.appendChild(’’);

事件操作

注册事件

传统注册事件element.οnclick= function(){},注册事件有唯一性，特点，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

addEventListener事件监听方式evenTarget.addEvenListener(type,listener[,useCapture])

type:事件类型字符串，比如click,mouseover

listener:事件处理函数

useCapture:是一个布尔值，默认false

DOM事件流

事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段