JavaScript DOM / BOM （查询获取元素对象【增、删、改、查】）以及常见鼠标事件

1、查询获取元素（查）

1.1、根据ID获取
document.getElementById(‘id’);
1.2、根据标签名获取1（使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。）
element.getElementsByTagName(‘标签名’);

 注意：
1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2. 得到元素对象是动态的
3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

1.3、根据标签名获取2 （获取某个元素(父元素)内部所有指定标签名的子元素.）
element.getElementsByTagName(‘标签名’);

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

1.4、根据HTML5新增属性获取

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); // 根据指定选择器返回全部对象

提醒：

querySelector 和 querySelectorAll里面的选择器是可以加相关的符号的也可以直接就是标签名，如果需要加符号的话class是小数点，ID是#号,比如:document.querySelector(’#nav’);

1.5、获取、设置和移除属性值（自定义属性操作）
获取
1.5.1、 element.属性获取属性值。
1.5.2、 element.getAttribute(‘属性’)

两者区别：
 element.属性获取内置属性值（元素本身自带的属性）
 element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性
设置
 element.属性 = ‘值’ 设置内置属性值。
 element.setAttribute(‘属性’, ‘值’);

区别：
 element.属性设置内置属性值
 element.setAttribute(‘属性’); 主要设置自定义的属性（标准）
移除

 element.removeAttribute(‘属性’);

1.6、特殊对象获取
1、直接获取body对象
doucumnet.body // 返回body元素对象
2、获取HTML对象
document.documentElement // 返回html元素对象

查询方法总结（ 3项）

DOM提供的API 方法： getElementById、getElementsByTagName 古老用法不太推荐
H5提供的新方法： querySelector、querySelectorAll 提倡
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡

2、增加元素节点（增）

1、创建节点

 *document.createElement('tagName')*

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，
是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

2、添加节点

2.1、 node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的
after 伪元素。

2.2、 node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before
伪元素。

3、删除元素节点（删）

3.1、node.removeChild(child)
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

4、修改元素节点或者元素内容（改）

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
四个方法

1、修改元素属性： src、href、title等
2、修改普通元素内容： innerHTML 、innerText
3、修改表单元素： value、type、disabled等
4、修改元素样式： style、className

****改变内容****

element.innerText(’ ‘)
从起始位置到终止位置的内容，在其中的内容不会去除HTML标签
element.innerHTML(’ ')
从起始位置到终止位置的内容，去除HTML标签的同时保留标签的属性样式

****改变样式****
element.style       改变元素样式
element.className改变元素类名

扩展（元素创建的三个方法）
document.write()
element.innerHTML
document.createElement()
区别：

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement 高

5、鼠标操作事件

5.1、鼠标操作事件

5.2、鼠标操作事件2

5.2.1、禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener(‘contextmenu’, function(e) {
e.preventDefault();
})
5.2.2、禁止鼠标选中（selectstart 开始选中）

      *document.addEventListener('selectstart', function(e) {e.preventDefault();})*

5.3 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象
MouseEvent 和键盘事件对象 KeyboardEvent。