DOM基础

DOM

文档对象模型 是w3c组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

获取元素

1. 根据Id名获取元素
   getElementById()方法 返回的是一个元素对象

2. 根据标签名获取
   getElementsByTagName() 返回的是获取元素对象的集合 以伪数组的形式存储的 我们想要依次打印里面的元素对象我们可以采取遍历的方式 如果页面中只有一个li返回的还是伪元素的形式 如果页面中没有这个元素 返回一个空的伪数组形式

3. 通过HTML5新增的方法获取
   根据类名获得某些元素的集合 getElementsByClassName()
   根据选择器返回第一个元素对象 querySelector()
   根据选择器返回所有元素对象集合 querySelectorAll()

4. 特殊元素获取

5. 获取body元素

var bodyEle = document.body
console.log(bodyEle)
console.dir(bodyEle)//console.dir()打印我们返回的元素对象

2. 获取HTML 元素

var htmlEle = document.documentElement
console.log(htmlEle)

事件

是可以被Javascript检测到的行为

1. 事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
   事件源 事件被触发的对象
   事件类型 如何触发 鼠标点击 鼠标经过 鼠标离开 获得鼠标焦点触发 失去鼠标焦点 鼠标移动 鼠标弹起 鼠标按下
   事件处理程序 通过一个函数赋值的方法 完成
2. 执行事件的步骤
3. 获取事件源
4. 注册事件 (绑定事件)
5. 添加事件处理程序(采取函数赋值形式) 表单里的值使用value来修改
6. 改变元素的内容
   innerText()不识别HTML标签 会去除换行和空格
   innerHtml()识别HTML标签 不会去掉换行和空格
   是可读写的

常见的鼠标事件

click：单击事件
dblclick：双击事件
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：鼠标移动事件
mouseover：移入事件
mouseout：移出事件
mouseenter：移入事件
mouseleave：移出事件
contextmenu：右键事件

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

操作元素

js 的DOM操作可以改变页面的内容结果和样式 我们可以利用DOM操作元素来改变元素的内容属性等

1. element.innerText
   从起始位置到终点位置的内容,但它去除html标签同时空格和换行也会去掉
2. element.innerText
   从起始位置到终点位置的内容,包括html标签 保留空格和换行

element.innerText 和 element.innerText 的区别

innerText不识别html标签 innerHTML识别 这两个属性是可读写的 可以获取元素 也可以改变元素内容

常用元素属性操作

修改元素属性

1. 获取元素
2. 注册事件处理程序
   元素.属性 = 值
   表单元素的属性操作
   表单里的值是通过修改value来修改的
   this 指向的是事件函数的调用者

样式属性操作

我们可以通过js修改元素的大小颜色位置等样式

1. element.style行内样式操作
2. element.className类名样式操作
   js修改style样式操作产生的是行内样式
   js修改className样式操作会直接修改类名会覆盖原先的类名

排他思想

如果有一组元素 我们想要的某一个元素实现某种样式 需要用到循环的排他思想

1. 所有元素都清除样式
2. 给当前元素设置样式