javaScript:什么是DOM操作?DOM节点？

目录

一.什么是DOM操作

1.DOM 操作可以用于实现以下功能：

2.DOM树

3.DOM节点/操作

什么是DOM节点？

 nodeName 属性 含有某一个节点的名称 

 nodeValue 属性，获取某一节点的值

nodeType 属性，返回的是节点的类型，是一个数字   

注意

常见节点 

元素节点：

文本节点：

属性节点：

注释节点:

文档节点：

 获取元素中所有子节点

特殊节点

获取节点内容的几种常用方法

1.innerHTML

2.innerText

3.textContent

相关代码

DOM基础

特殊节点

获取节点内容

---

一.什么是DOM操作

          DOM 操作指的是使用 JavaScript 通过文档对象模型（DOM）来操纵网页中的 HTML 元素和内容。DOM 是一个树状结构，表示网页的结构和内容，它允许开发者通过 JavaScript 修改、添加、删除或查询网页中的元素和属性。

1.DOM 操作可以用于实现以下功能：

1. 获取元素：可以通过 DOM 操作获取网页中具有特定标签名、类名、ID 或其他属性的元素。这使我们能够选择需要进行操作的元素，并获取对应的 DOM 对象。

2. 修改元素内容：通过 DOM 操作，我们可以修改元素的文本内容、HTML 结构、属性值等。例如，可以通过 DOM 操作更改段落的文本、更新图片的 URL 或修改按钮的样式。

3. 添加和删除元素：通过 DOM 操作，我们可以动态地添加新的元素到网页中，或者删除现有的元素。这对于创建动态内容、动态生成列表或实现动画效果非常有用。

4. 修改元素样式：DOM 操作可以修改元素的 CSS 样式，包括颜色、尺寸、位置等。通过 JavaScript 可以动态地添加、删除或修改元素的类名和内联样式，从而改变元素的外观和布局。

5. 处理事件：通过 DOM 操作，可以为元素添加事件监听器，以便在用户执行特定操作时触发相应的 JavaScript 代码。这使我们能够实现交互性和响应性的网页，例如处理按钮点击、鼠标移动或键盘输入等事件。

       DOM 操作允许开发者以编程方式更改网页的结构和内容，从而实现动态和交互性的效果。通过利用 DOM 操作，可以创建出富有交互性、响应式和动态的网页应用程序。 

2.DOM树

     DOM树的概念，所谓的Dom其实就是一个文档结构，当浏览器记录该dom结构的时候

会在底层把该结构转化为树状结构

3.DOM节点/操作

什么是DOM节点？

   dom节点，dom结构中的每一个元素，都是一个dom节点，根据节点的结构，可以分为

根节点，父节点，子节点

 nodeName 属性 含有某一个节点的名称 

nodeName 属性 含有某一个节点的名称 

元素节点 的 nodeName 是元素的名字，大写的英文单词

属性节点 的 nodeName 是属性名称

文本节点 的 nodeName 都是 #text ，所有的文本节点名字都是#text

文档节点 的 nodeName 是#document 

 nodeValue 属性，获取某一节点的值

nodeValue 属性，获取某一节点的值

属性节点 和 文本节点的 nodeValue ，都是他们对于的内容

元素节点 和 文本节点 没有 nodeValue 值

nodeType 属性，返回的是节点的类型，是一个数字   

nodeType 属性，返回的是节点的类型，是一个数字

注意

在html中每一次操作，包括换行，回车，注释都会产生一个节点

元素的children属性，用来获取该元素的所有第一个层元素节点（子元素）

常见节点 

元素节点：

每一个html标签都是一个元素节点 列如 div ul li ，nodeType 值是 1  (nodeType节点类型)

文本节点：

元素节点或者属性节点中的内容，nodeType 值是3

属性节点：

元素节点的属性，列如 id class src title 等，nodeType  值是 2

注释节点:

被注释掉的内容，nodeType 值是8

文档节点：

整个document文档，nodeType值是9

 获取元素中所有子节点

 //childNodes获取元素中所有子节点
   console.log(list.childNodes);   //获取节点列表

特殊节点

document.body; 获取body 标签元素对象

document.documentElement 获取html 标签元素对象

document.doctype 文档声明节点，他的nodeType值是10

获取节点内容的几种常用方法

1.innerHTML

innerHTML 可以获取内容，获取的是一个字符串，包含dom结构

中的制表符和空格，当元素设置为隐藏的时候，仍然可以获取

2.innerText

innerText 可以获取标签中的所有的文本内容，会忽略内容中的制表符和空格（空格变成1个）

并且当 display:none的时候，可以获取到内容，此时不会忽略内容中的制表符和空格 ,当隐藏设置为 visibility: hidden;

的时候，获取不到元素的内容。

3.textContent

ie8以下不支持，获取元素中所有的文本内容，所有格式保留，元素隐藏和显示都会获取内容

相关代码

DOM基础

    
    
    


    
两情如是久长时朝朝暮暮吃壮馍
    

        
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    

特殊节点

获取节点内容

    
    
    
    


    

        

           
古今多少事
 
        
        杨   慎
        

            
都付笑谈中