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

红太狼 2023-10-04 14:59 9阅读 0赞

### 1、查询获取元素（查） ###

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

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

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

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

**1.4、根据HTML5新增属性获取**

1.  document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2.  document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
3.  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项）***

1.  DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
2.  H5提供的新方法： querySelector、querySelectorAll 提倡
3.  利用节点操作获取元素： 父(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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ_size_16_color_FFFFFF_t_70_pic_center]

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

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

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

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

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

### 5、鼠标操作事件 ###

**5.1、鼠标操作事件**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ_size_16_color_FFFFFF_t_70_pic_center 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。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210601103335391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2021060110362361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20210601104113946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center