DOM（含思维导图，笔记）

最新推荐文章于 2023-03-08 22:43:05 发布

·LXY·

最新推荐文章于 2023-03-08 22:43:05 发布

阅读量397

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_73630788/article/details/127704918

版权

在这里插入图片描述

DOM

一、BOM的screen对象：

返回当前窗口与屏幕相关的信息

1、属性：

（1）width / height：屏幕的宽度和高度

console.log('当前窗口屏幕的宽度：',screen.width)    console.log('当前窗口屏幕的高度：',screen.height)   console.log('浏览器在屏幕中垂直空间：',screen.availHeight)    
console.log('浏览器在屏幕中的水平空间：',screen.availWidth)  
console.log('屏幕的颜色深度：',screen.colorDepth)   console.log('色彩的深度：',screen.pixelDepth)

二、BOM的总结

浏览器对象模型：Browser Object Model
作用：提供了对浏览器进行操作的方法、属性
核心对象：window对象（重点）
其他对象：document、location、history、navigator、screen（既可以作为BOM对象独立使用，也可以作为window对象的属性使用）

三、JavaScript的组成

ECMAScript：JavaScript的语法标准 —— ECMAScript5.0、ECMAScript2015（ES6）、ECMAScript2017
BOM：浏览器对象模型
DOM：文档对象模型

四、DOM：

什么是DOM?

Document Object Model：文档对象模型
DOM的核心：document对象
DOM的作用：可以访问和操作XML和HTML文档中标签、标签的属性、节点的属性和方法
在DOM中将整个html文档看做是一个倒立的树（树装结构）：一个html页面就是一个DOM对象，是一棵DOM HTML树
```
（1）DOM HTML树的根节点：html

（2）元素(Element)：html文档中的标签

（3）节点(Node)：html文档中的内容
```

DOM树中节点的分类：

（1）标签节点：所有的标签

（2）属性节点：标签的属性 —- 内置属性、自定义属性

（3）文本节点：标签中的文本、换行、空格等

（4）注释节点：

基本概念

（1）根节点：根节点是html，有且只能有一个

（2）子节点：某个节点的下一级节点
```
 （3）父节点：某个节点的上一级节点

 （4）兄弟节点：拥有相同父节点的节点
```

let div = document.getElementById('dt')
console.log(div)
console.log(div.__proto__) //__proto__：表示元素的原型

五、通过document对象来操作html页面中的元素

getElementById(“id属性值”)：通过标签的id属性获取标签

getElementsByName(“name属性值”)：通过标签的name属性获取标签，返回值的类型是NodeList

<input type="checkbox" name="chk">西安    
<input type="checkbox" name="chk">北京    
<input type="checkbox" name="chk">南京    
<input type="checkbox" name="chk">洛阳    
<script>        
let chk_arr = document.getElementsByName('chk')        console.log(chk_arr)    
</script>

getElementsByTagName(“标签名”)：通过标签名获取标签，返回值的类型是HTMLCollection
getElementsByClassName(“class属性值”)：通过标签的class属性获取标签，返回值的类型是HTMLCollection
querySelector(‘#id属性值’)：返回一个指定id属性值的标签
querySelector(‘.class属性值’)：返回第一个指定class属性值的标签
querySelector(‘标签名’)：返回第一个指定标签名的标签
querySelectorAll(‘.class属性值’)：返回所有指定class属性值的标签。返回值的类型是NodeList
querySelectorAll(‘标签名’)：返回所有指定标签名的标签。返回值的类型是NodeList

六、document对象的属性

document.body：返回文档的body元素
document.documentElement：返回文档的html元素
document.forms：返回文档的form(表单)对象

七、Element对象的属性和方法：

在JavaScript代码中使用html的标签（Element）属性和方法

	   1、children属性：用来获取某个元素的子元素

强调：HTMLCollection和NodeList的区别

	（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

	（2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

	（3）HTMLCollection对象用于元素操作

（4）NodeList对象用于节点操作

八、元素的属性和方法

1、属性：

	 （1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

	 （2）innerText：设置或返回元素中去除所有标签的内容（不能解析标签—-不识别标签）

（3）textContent：设置或者返回指定节点的文本内容（不识别换行）

2、方法：

（1）document.write(“html内容”)：在文档中写入指定的内容

	 （2）document.writeln(“html内容”)：向文档写入指定的内容后并换行

九、标签的属性

1、attributes：返回标签的所有属性集合

2、setAttribute(name, value)：设置标签的属性值。参数name表示属性名，参数value表示属性值

<div id="d1" class="dt" name="mydiv" title="woniu">    北京大学</div>
<button id="btn">更改文字</button>
<script>    
let btn_font = document.getElementById('btn')

btn_font.addEventListener('click',function(){           document.getElementById('d1').setAttribute('class','dd')    })
</script>

练习：对input中输入的用户名进行验证。当用户名合法时在input后显示“用户名正确”，否则显示”用户名错误“

<div class="login">
      <label>
         用户名：<input type="text" id="username"><span id="msg"></span>
      </label>
      <br><br>
      <button id="btn_check">验证</button>
   </div>
   <script>
      let check = document.getElementById('btn_check')
      check.addEventListener('click', function () {
         //1.获取input的value  
         let uname = document.getElementById('username').value
         //2.对用户名进行判断            
         if (uname === 'abc') {
            document.getElementById('msg').innerText = '用户名正确'
            document.getElementById('msg').setAttribute('class', 'ok')
         } else {
            document.getElementById('msg').innerText = '用户名错误'
            document.getElementById('msg').setAttribute('class', 'fail')
         }
      })    
   </script>

	 3、getAttribute(name)：获取标签的某个属性值。参数name代表属性名

	4、removeAttribute(name)：删除标签的某个属性。参数name代表属性名

十、元素的样式

	1、用法：元素名.style.样式属性名

注意：“样式属性名”在使用时需要将单词之间的’-‘删除，将第二个单词的首字母大写

DOM的节点操作

1、DOM：

文档对象模型。核心对象是document document.body

2、DOM树：

浏览器的JavaScript引擎（谷歌的V8引擎）在解析页面时，采用树形结构来存放页面元素

3、DOM操作元素的样式：

（1）元素对象名.style.样式属性名 = 属性值
（2）HTML5对象样式的操作：
1. 一个元素的class属性可以有多个值：作用是在保留原有样式的基础上添加新的样式
2. 如何在js程序运行过程中动态的添加class属性值：classList属性：是元素的class属性的列表

4、classList属性提供的方法和属性

属性：length —— 某个标签的class属性值的个数（即多少个类名）
方法：
1. add(‘字符串’)：给元素添加类名。一次只能添加一个
2. remove(‘字符串’)：将元素的类名删除。一次只能删除一个
3. toggle(‘字符串’)：若类名存在则删除，不存在则添加
4. item(index)：根据index，来获取元素的类名
5. contains（‘类名’）：判断元素是否含有给定的类名，若有返回true，没有返回false

<div class="d1 s1 s2 s3 s4" id="dt"></div>    
<!-- <button id="btn_class">class样式列表</button> -->    <button id="btn_center">居中</button>    
<button id="btn_remove">恢复</button>    
<button id="btn_toggle">交替</button>    
<button id="btn_item">索引</button>    
<script>        
//document.querySelector('#btn_class').addEventListener('click',function(){        
//     let clazz = document.querySelector('#dt')        //     console.log(clazz.classList)        
// })        document.querySelector('#btn_center').addEventListener('click',function(){            document.querySelector('#dt').classList.add('s2')        })        document.querySelector('#btn_remove').addEventListener('click',function(){            document.querySelector('#dt').classList.remove('s2')        })        document.querySelector('#btn_toggle').addEventListener('click',function(){            document.querySelector('#dt').classList.toggle('s2')        })        document.querySelector('#btn_item').addEventListener('click',function(){            //  let  class_name = document.querySelector('#dt').classList.item(3)            //  console.log(class_name)            
let  flag = document.querySelector('#dt').classList.contains('s5')            console.log(flag)        
})    
</script>

5、DOM中节点的操作：

采用操作节点的方式来操作页面中的元素

获取节点时使用的属性：

a、firstChild：获取当前节点的首个子节点。

注意：换行符、空格等也是节点
b、nextSibiling：返回同一层级中指定节点之后紧跟的节点

   <div id="dt">        <p>西安市</p>        <p>咸阳市</p>        <p>宝鸡市</p>        <p>渭南市</p>    </div>    <script>        let div = document.querySelector('#dt')        console.log('div的第一个子节点：',div.firstChild.nextSibling)    </script>

lastChild：访问当前节点的最后一个子节点

previousSibling：返回同一层级中指定节点的前一个节点

    <div id="dt">        <p>西安市</p>        <p>咸阳市</p>        <p>宝鸡市</p>        <p>渭南市</p>    </div>    <script>        let div = document.querySelector('#dt')        console.log('div的第一个子节点：',div.firstChild.nextSibling)        console.log('div的最后一个子节点：',div.lastChild.previousSibling)    </script>

nodeName：节点的名称
nodeValue：节点的值
nodeType：节点类型
- 1：表示当前节点的类型是标签（元素）
- 2：表示属性节点
- 3：表示文本节点
parentNode：访问当前元素节点的父节点
childNodes：当前节点的所有子节点

强调：childNodes属性和children属性的区别

（1）相同点：都可以获取子元素

（2）不同点：

childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

children返回的元素节点（即标签），返回值类型是HTMLCollection

getAttribute(‘id’)：用来获取元素的id属性值

getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）

6、追加节点

（1）创建元素节点：

document.createElement()

（2）在指定节点的末尾追加节点

appendChild(newNode)

（3）在指定节点之前添加节点

insertBefore(newNode，node)：将结点newNode插入到节点node之前

该方法需要通过插入节点(node)的父节点来调用

<h2 id="ht">颐和园</h2>     
<input type="text" name="txt" id="node_value">    <button id="btn_insert">插入元素</button>    
<script>        
	//1.获取按钮        
let insert = document.querySelector('#btn_insert')      	//2.给按钮注册click事件：        insert.addEventListener('click',function(){            		//2.1 获取input的值            
let txt = document.querySelector('#node_value').value     	  //2.2 创建文本节点，文本内容为txt            
let txt_node = document.createTextNode(txt)            		   //2.3 创建元素节点：创建h2标签            
let my_h2 = document.createElement('h2')            		//2.4 将文本节点追加到h2中            my_h2.appendChild(txt_node)        
	//3.获取插入位置上的标签：
<h2 id="ht">颐和园</h2>           
let node_ht = document.querySelector('#ht')           	  if(node_ht.parentNode){ 
//node_ht存在父节点,通过父节点调用insertBefore插入节点           node_ht.parentNode.insertBefore(my_h2,node_ht)       }
})

（4）创建文本节点：

document.createTextNode()

let mydiv = document.createElement('div')
let h2 = document.createElement('h2')
let txt = document.createTextNode('圆明园')h2.appendChild(txt)mydiv.appendChild(h2)document.body.appendChild(mydiv)

练习：利用DOM创建ul无序列表

let arr = ['西游记','红楼梦','水浒传','三国演义']
let my_ul = document.createElement('ul') 
//创建ul标签
for(let i=0;i<arr.length;i++){       
	let txt_node = document.createTextNode(arr[i]) 
	//创建文本节点       
	let li_node = document.createElement('li') 
	//创建li节点       
	li_node.appendChild(txt_node) 
	//将文本节点添加到li节点中       		   				my_ul.appendChild(li_node) 
  }
document.body.appendChild(my_ul)

事件处理

一、DOM的操作

复制节点：

cloneNode（deep）

参数deep是Boolean型。true/false

true：表示深度复制（将节点及其子节点进行复制）— 深拷贝
false：表示浅拷贝（只复制节点而不复制子节点）— 浅拷贝

<body>
    <select id='sex'>
        <option value='%'>请选择</option>
        <option value='1'>男</option>
        <option value='0'>女</option>
    </select>
    <hr>
    <div id='div_clone'></div>
    <button id='clone_false' onclick="copyNode(false)">浅拷贝</button>
    <button id='clone_true' onclick="copyNode(true)">深拷贝</button>
<script>
	function copyNode(bool){
        let sel = document.getElementById('sex')
        let newNode = sel.cloneNode(bool)
        let mydiv = document.getElementById('div_clone')
        let br = document.createElement('br')
 	mydiv.appendChild(newNode)
 	mydiv.appendChild(br)
    }    
</script>
</body>

删除节点：
- removeChild（node）
  
  (1) 参数node为要删除的节点
  
  (2) 前提：被删除的节点必须为空（没有子节点）
hasChildNodes()：判断当前节点是否有子节点
- 返回值为ture：表示有子节点
- 返回值为false：表示没有子节点

替换子节点：replaceChild（newNode，oldNode）

用newNode节点替换oldNode节点

<h2 id="b1">可以替换文本内容</h2>
   输入标记：<input type="text" id="bj"><br><br>
   输入文本：<input type="text" id="txt"><br><br>
   <input type="button" value="替换" onclick="replaceNode(txt.value.bj.value)">
   <script>
      function replaceNode(txt, bj) {
         const rep = document.getElementById('b1')
         const txt = document.querySelectorAll('input').value
         if (rep) {
            //创建新节点
            const newNode = document.createElement(bj)
            //设置新节点的id属性
            newNode.setAttribute('id', 'b1');
            //创建节点文本
            const newTxt = document.createTextNode(txt)
            //将文本添加到节点中
            newNode.appendChild(newTxt)
            //替换节点
            rep.parentNode.replaceChild(newNode, rep)
         }
      }
   </script>

二、DOM总结

DOM：文档对象模型 Document Object Model。一个html页面就是document对象
1. DOM核心：document对象
2. 作用：在JavaScript程序中通过document 对象操作html文档
通过DOM获取html页面中的元素
操作html页面中元素的属性：setAttribute
操作html页面中元素的CSS样式
操作元素节点：

三、事件处理

1、基本概念

事件：JavaScript可以侦测到的行为（用户在页面上进行的某种操作）

页面加载（浏览器打开页面）、单击鼠标、鼠标进入某个区域、焦点、键盘
事件处理程序：用户进行了某种操作后，所运行的JavaScript程序段
事件驱动式：当事件发生后才去执行相应的程序
事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件的传播过程就是事件流
在web中对事件流的解决方案：
- 事件捕获：网景公司（Netscape）。事件流传播的顺序应该是从DOM树的根节点到发生时间的元素节点
- 事件冒泡：微软公司（Microsoft）。事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点
冒泡的前提是，父级也定义了相应的事件，当子元素和父元素有相应的事件时，当子元素被触发父元素也会被触发 — 冒泡机制
- w3c的事件流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理阶段采用冒泡（）
- ps：event：表示事件对象，只要有事件发生就有event对象
事件捕获的实现：
- addEventListener（事件名，事件处理程序，事件处理方式）
  - 参数1：事件名（click、change、load、mousedown…）
  - 参数2：事件处理程序（）
  - 参数3：事件处理方式（true—表示采用事件捕获方式、false—采用事件冒泡方式）

2、事件的绑定方式

行内绑定式

<标签名事件名=“事件处理程序”></标签名>
动态绑定式

DOM对象名.事件名 = 事件处理程序

注意："行内绑定式"和"动态绑定式"的区别

不同点：

（1）"行内绑定式"中事件名作为标签的属性，"动态绑定式"中事件名作为DOM对象的属性

（2）"行内绑定式"的事件处理程序中的this代表的是window对象，"动态绑定式"的事件处理程序中的this代表触发事件的DOM对象

相同点：

一个DOM对象的同一个事件只能有一个事件处理程序

事件监听式：可以给DOM对象的同一个事件绑定多个事件处理程序

DOM对象.addachEvent(type,callback);//早期IE浏览器

DOM对象.addEventListener(type,callback,[capture]);//标准浏览器

3、删除事件绑定

DOM对象.removeEventListener(type,callback)

四、事件对象

来源：但事件发生时，都会产生一个事件对象（event对象）
作用：通过事件对象可以了解与事件相关信息（DOM对象，事件的类型…）
获取事件对象：
1. 早期的IE浏览器：window.event
2. 标准浏览器：将一个event对象直接传入事件处理程序中
常用属性：
1. type：代表当前事件的类型
2. target：返回触发此事件的元素（事件的目标节点）
3. currentTarget：返回其事件监听器触发该事件的元素
4. bubbles：表示事件是否是冒泡事件类型
常用函数：
1. stopPropagation()：阻止事件冒泡
2. preventDefault()：阻止默认行为

五、事件的分类

鼠标事件：click

mouseover：鼠标进入

mouseout：鼠标离开

<div id="app" style="width: 300px;height:300px;background-color:red"></div>
<script>
        document.getElementById('app').addEventListener('mouseover',function(){
            this.style.backgroundColor = 'blue'
        })
        document.getElementById('app').addEventListener('mouseout',function(){
            this.style.backgroundColor = 'red'
        })
</script>

一、事件分类

1、页面事件

load：页面加载事件。用于body内所有标签都加载完成后才触发
unload：用于页面的关闭时触发。经常用于清除变量，避免内存的泄漏

2、焦点事件：用于表单验证

focus：当获得焦点时触发
blur：失去焦点时触发

都不会产生冒泡

3、鼠标事件

click：鼠标单击
dblclick：鼠标双击
mouseover：鼠标进入
mouseout：鼠标移开
change：当内容发生改变时触发 — input、select
mousedown：按下任意鼠标按键时触发
mouseup：当释放任意鼠标按键时触发
mousemove：在元素内鼠标移动时会持续触发

4、在鼠标事件中，鼠标的位置信息的获取

clientX：鼠标指针位于浏览器页面当前窗口可视化区域的水平坐标（X坐标）
clientY：鼠标指针位于浏览器页面当前窗口可视化区域的垂直坐标（Y坐标）
pageX：鼠标指针位于文档的水平坐标（X坐标）
pageY：鼠标指针位于文档的垂直坐标（Y坐标）
screenX：鼠标指针位于屏幕的水平坐标（X坐标）
screenY：鼠标指针位于屏幕的垂直坐标（Y坐标）

强调：事件对象的兼容性处理

早期IE浏览器版本获取事件对象的方法：window.event

标准浏览器获取事件对象的方法：event
```
DOM对象.addEventListener('事件名称',function（e）{
	let my_event = e | window.event
})
```

早期IE浏览器对事件对象pageX和pageY的兼容性处理

var pageX = event.pageX || event.clientX+document.documentElement.scrollLeft;

var pageY = event.pageY || event.clientY+document.documentElement.scrollTop;
//鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度