JS操作及事件

DOM对象

什么是DOM

DOM叫做文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改HTML文档的内容和结构。

DOM的作用

通过可编程的对象模式：

• JavaScript 能够创建动态的 HTML节点
• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

DOM查询元素方法

方法	说明	返回值
getElementById(“id值”)	通过 id 查找 HTML 元素	一个元素对象
getElementsByTagName（”name值”）	通过标签名查找 HTML 元素	元素对象集合
getElementsByClassName（”class值”）	通过类名找到 HTML 元素	元素对象集合
querySelector	通过选择器获取第一个对象	一个元素对象
querySelectorAll	根据选择器返回所有对象集合	元素对象集合
body	获取body元素	一个元素对象
documentElement	获取html元素	一个元素对象

DOM元素的其他方法

方法	说明
createElement	用于创建一个元素节点
appendChild	向一个元素节点的末尾追加一个节点
insertBefore	向某一个节点前插入一个节点
removeChild	移除某一节点下的某一个节点
replaceChild	将页面中的某一个节点替换掉

JS操作属性和样式

元素内部结构的操作

1、innerHTML

• 获取元素内部的HTML结构
• 设置元素内容

2、innerText

• 获取元素内部的文本（只获取文本内容）
• 设置元素内部文本

元素属性的操作

1、getAttribute

• 获取元素的某个属性值（包括自定义属性）
• element.getAttribute(‘class’)

2、setAttribute

• 给元素的设置属性（包括自定义属性）
• element.setAttribute(‘class’,’box’)

3、removeAttribute

• 移除元素属性（包括自定义属性）
• element.removeAttribute(‘class’,)

元素样式的操作

1、style

• 专门用来给元素添加css样式的
• 添加的都是行内样式
• element.style.样式='值'

2、className

• 专门用来添加元素的类名
• 专门用来获取元素类名称
• element.className='值'

JS事件

事件是发生在HTML元素上的一些事情。

元素主要有以下三部分组成：

• 事件源：网页上的元素。如：按钮，输入框等。
• 事件类型：为用户或浏览器的行为。如：鼠标点击，选中输入框等。
• 时间处理程序：事件发生后定义的程序。如：跳转网页，算术运算等。

---

/*

1.行内添加事件

            οnclick="function()"

2.获取页面元素

            元素.οnclick=function(){

            }

3.添加事件监听器

            元素.addEventListener("click",function)

        2和3的区别

          1、同一个元素的同类型事件只能绑定一个

          2、可以绑定多个同类型事件，且都会执行

    */

---

解绑事件

• 直接删除法，使用“对象.οnclick=false;”
• 使用addEventListener绑定事件，使用removeEventListener删除绑定事件即可

---

~~end~~