javaScript:什么是DOM操作?DOM节点？_获取dom节点是用来做什么的-优快云博客

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

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

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

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

处理事件：通过 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基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom基础</title>
</head>
<body>
    <div class="wp">两情如是久长时朝朝暮暮吃壮馍</div>
    <ul id="list">
        <!-- <li>1</li>
        <li>2</li> -->
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>
<script>
   /*
    DOM：（document object model） 文档对象模型
    1.DOM中提供了很多属性和方法，能够使我们方便的对html文档及其内部的
    元素对象进行 创建 删除 插入 修改 替换 拷贝 查询 等。
    2.DOM树的概念，所谓的Dom其实就是一个文档结构，当浏览器记录该dom结构的时候
    会在底层把该结构转化为树状结构
    3.dom节点，dom结构中的每一个元素，都是一个dom节点，根据节点的结构，可以分为
    根节点，父节点，子节点
    */
   let list = document.getElementById('list')

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

   console.log(list.nodeType,list.nodeName,list.nodeValue)  //nodeName节点名称
   /*
   元素节点：每一个html标签都是一个元素节点 列如 div ul li ，
   nodeType 值是 1  (nodeType节点类型)
   文本节点：元素节点或者属性节点中的内容，nodeType 值是3
   属性节点：元素节点的属性，列如 id class src title 等，nodeType
   值是 2
   注释节点:被注释掉的内容，nodeType 值是8
   文档节点：整个document文档，nodeType值是9
   */
   //文本节点
   let listNodel = list.childNodes[0];
   console.log(listNodel.nodeType,listNodel.nodeName,listNodel.nodeValue) 

   //属性节点，属性节点的获取需要使用
   let ids = list.attributes['id']
   console.log(ids.nodeType,ids.nodeName,ids.nodeValue) 

   //注释节点
   let comt = list.childNodes[1];
   console.log(comt.nodeType,comt.nodeName,comt.nodeValue) 
   //文档节点
   console.log(document.nodeType,document.nodeName,document.nodeValue) 

   /*
   nodeName 属性 含有某一个节点的名称
       元素节点 的 nodeName 是元素的名字，大写的英文单词
       属性节点 的 nodeName 是属性名称
       文本节点 的 nodeName 都是 #text ，所有的文本节点名字都是#text
       文档节点 的 nodeName 是#document
   nodeValue 属性，获取某一节点的值
       属性节点 和 文本节点的 nodeValue ，都是他们对于的内容
       元素节点 和 文本节点 没有 nodeValue 值 
   nodeType 属性，返回的是节点的类型，是一个数字
        
   在html中每一次操作，包括换行，回车，注释都会产生一个节点

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

  console.log(list.childNodes,list.children);

  for (let i = 0; i < list.children.length; i++) {
    list.children[i].onclick = function(){
        alert(this.innerHTML)
    }
    
  }
</script>

特殊节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊节点</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    document.body; 获取body 标签元素对象

    document.documentElement 获取html 标签元素对象
    document.doctype 文档声明节点，他的nodeType值是10
    */
    let body = document.body;
    console.log(body.nodeType,body.nodeName,body.nodeValue);

    let html = document.documentElement;
    console.log(html.nodeType,html.nodeName,html.nodeValue);

    let doc = document.doctype;
    console.log(doc.nodeType,doc.nodeName,doc.nodeValue);
</script>

获取节点内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取节点内容</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="wp">
        <div>
           <p>古今多少事</p> 
        </div>
        杨   慎
        <div>
            <p>都付笑谈中</p>
        </div>
    </div>
    <div class="test"></div>
</body>
</html>
<script>
/*
获取元素节点的内容
因为 nodeValue 不能在元素节点上使用
获取元素节点内容的方式
1.innerHTML
innerHTML 可以获取内容，获取的是一个字符串，包含dom结构
中的制表符和空格，当元素设置为隐藏的时候，仍然可以获取

2.innerText 
innerText 可以获取标签中的所有的文本内容，会忽略内容中的制表符和空格（空格变成1个）
并且当 display:none的时候，可以获取到内容，此时不会忽略内容中的制表符和空格 ,当隐藏设置为 visibility: hidden;
的时候，获取不到元素的内容。

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

let wp = document.getElementById('wp')
console.log(wp.innerHTML);
console.log(wp.innerText);
console.log(wp.textContent);
</script>