看黑马程序员学习JavaScript之DOM重点核心

赵云澜

已于 2022-09-21 13:03:36 修改

阅读量819

点赞数

文章标签： javascript 学习前端

于 2022-09-21 12:48:58 首次发布

本文链接：https://blog.csdn.net/weixin_46278178/article/details/126967526

版权

一、什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

对于JavaScript，为了能够使Javascript操作HTML，Javascript就有了一套自己的DOM编程接口。
对于HTML，DOM使得HTML形成了一棵DOM树。包括文档、元素、节点。
图片来源:XML DOM 节点树
注意：我们获取过来的DOM元素是一个对象（Object），所以称为文档对象模型

二、DOM重点核心

关于DOM操作，我们主要针对元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。

1. 创建
1.1 document.write()
示例：

document.write('<div>123</div>')

1.2. element.innerHTML
示例：

var inner = document.querySelector('.inner')
inner.innerHTML = "<a href='#'>innerHTML</a>"

1.3. document.createElement()
示例：

var create = document.querySelector('.create')
// 创建需要添加的元素
var a = document.createElement('a')
// 添加到父节点内
create.appendChild(a)

以上三个都可以创建元素，页面上没有可以使用它们动态生成新的DOM元素。
2. 增
2.1 appendChild() 已有的子节点后插入一个新的子节点
示例：

document.getElementById("myList").appendChild(newListItem);

2.2 insertBefore() 已有的子节点前插入一个新的子节点。
示例：

document.getElementById("myList").insertBefore(newItem,existingItem);

3. 删
3.1. removeChild() 删除其中的某一个已有元素，若不存在则返回null
示例：

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

4. 改
主要修改DOM的元素属性，DOM元素的内容、属性、表单的值等
4.1. 修改元素的属性：src、href、title等
示例:

// no1是控制修改第一张图片名字
var no1 = document.getElementById('no1')
// no3是控制修改第二张图片名字
var no3 = document.getElementById('no3')
// 显示的图片
var img = document.querySelector('img')

no1.onclick = function (){
// 若需要试验此处替换本地图片路径
   img.scr = './img/女生宿舍.jpg'
   img.title = '女生宿舍'
 }
no3.onclick = function (){
// 若需要试验此处替换本地图片路径
   img.src = './img/美丽新世界.jpg'
   img.title = '美丽新世界'
 }

4.2. 修改普通元素的内容:innerHTML、innerText
innerHTML和innerText示例以及区别:

var div = document.querySelector('div')
// innerText 不识别html标签
// div.innerText = '<strong>今天是：</strong>2020'
var p = document.querySelector('p')
// innerText 不能获取标签
// console.log(p.innerText)

// innerHTML 识别html标签
div.innerHTML =  '<strong>今天是：</strong>2022'
// innerHTML 可以获取元素内的标签内容 W3C 推荐
console.log(p.innerHTML)

4.3. 修改表单的元素:value、type、disabled等
示例:

<body>
  <button>提交</button>
  <input type="text" value="" placeholder="请输入内容">

  <script>
    var btn = document.querySelector('button')
    var input = document.querySelector('input')

    btn.onclick = function (){
      // innterHTML 只能修改普通元素属性的内容
      // 表单里面的值是通过 input.value 修改
      input.value = '我能修改输入框的值value'

      // this 指向的是事件函数的调用者，btn
      // disbled 用来禁用按钮 默认是false
      this.disabled = true
    }
  </script>
</body>

4.4. 修改元素样式:style、className
sytle和className的区别就是使用场景哪个方便用哪个
若修改的样式较多，可提前写好一个样式类，使用className直接修改即可。注意若还想保留部分原样式可以写成:this.className = ‘原样式类名修改后的样式类名’
示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>17-通过className更改元素样式</title>
  <style>
    .first {
      border: 1px solid #ccc;
      width: 60px;
      height: 60px;
      font-size: 15px;
      position: absolute;
      left: 150px;
      top: 150px;
      background-color: yellowgreen;
    }
    .second {
      border: 2px solid blueviolet;
      width: 140px;
      height: 70px;
      font-size: 20px;
      font-family: Georgia, 'Times New Roman', Times, serif;
      left: 300px;
    }
  </style>
</head>
<body>
  <div class="first">文本</div>

  <script>
    var text = document.querySelector('.first')
    text.onclick = function (){
      this.className = 'first second'
    }
    console.dir(text)
  </script>
</body>
</html>

js中属性名采用驼峰命名发 js修改的样式是行内样式，比内嵌样式和外部样式权重高。

5. 查
主要获取查询DOM元素
5.1. DOM提供的API方法：getElementById()、getElementsByTagName()、getElementsByClassName() 古老用法不太推荐
示例：

var box = document.getElementsByClassName('.box')
console.dir(box)

5.2. H5提供的新方法：querySelector()、querySelectorAll()
5.2.1. querySelector() 返回文档中匹配指定 CSS 选择器的一个元素。
示例：

// querySelector 返回指定选择器的第一个元素对象，切记里面的选择器需要加符号，class类 . id类 #
 var firstBox = document.querySelector('.box')
console.log(firstBox)

// 获取nav的元素对象
var firstNav = document.querySelector('#nav')
console.log(firstNav)

5.2.2. querySelectorAll() 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。
示例：

var ulAll = document.querySelectorAll('li')
console.log(ulAll);
// querySelectorAll 返回指定选择器的所有元素对象
var boxAll = document.querySelectorAll('.box')
console.log(boxAll)

5.3. 利用节点操作获取元素：父节点(parentNode)、子节点(childern)、兄弟(previousElementSibling(上一个兄弟)、nextElementSibling(下一个兄弟)) 提倡
父节点示例：

<body>
  <ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
  </ul>
  <div class="box">
    <div class="sss">
      <span class="erweima">x</span>
    </div>
  </div>

  <script>
    var erweima = document.querySelector('.erweima')
    // 父节点 parentNode
    // 获取到离erweima最近的父节点,若找不到返回null
    console.log(erweima.parentNode)   
  </script>
</body>

子节点示例：

<body>
  <div>我是div</div>
  <span>我是span</span>
  <ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li> 
  </ul>
  <ol>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
  </ol>
  <div class="demo">
    <div class="box">
      <span class="erweima">x</span>
    </div>
  </div>
  <script>
    var ul = document.querySelector('ul')
    var lis = ul.querySelectorAll('li')
    // childNodes 获取所有的子节点包括元素节点和文本节点等等
    /* for(var i = 0; i < ul.childNodes.length; i++){
      if(ul.childNodes[i].nodeType === 1){
        console.log(ul.childNodes[i])
      }
    } */

    // childern 获取所有子节点的元素节点 也是实际开发中常用的
    console.log(ul.children)    // 非标准但常用

  </script>
</body>

兄弟节点示例：

<body>
  <div>我是div</div>
  <span>我是span</span>

  <script>
    var div = document.querySelector('div')
    // 获得兄弟节点 获得的一般是文本节点
    console.log(div.nextSibling);
    // ie9以上才支持 
    console.log(div.nextElementSibling);
  </script>
</body>

6. 属性操作
主要针对自定义属性。
6.1. setAttribute:设置DOM的属性值
6.2. getAttribute:得到DOM的属性值
6.3. removeAttribute:移除属性

7. 事件操作
给元素注册事件，采取事件源.事件类型 = 事件处理程序
示例：

<body>
  <div>123</div>
  <script>
    // 1.获取事件源
    var div = document.querySelector('div')
    // 2. 绑定事件，注册事件
    div.onclick = function (){
      // 3. 添加事件处理程序
      console.log('我被点击啦')
    }
  </script>
</body>