[TOC]

✊总有人要成为第一，为什么不是你。

2021年08月11日

工作重点

1 工作重点事项 进度 已完成
2 上午讲dom 已完成
- [x]

| | 3 | 下午讲dom | 已完成 |
- [x]

| | 4 | 晚上做练习 | 已完成 |
- [x]

|

遇到的问题和解决思路

遇到的问题

  1. 删除一个，会漏掉其他的


  2. 解决思路

  3. 记得i—


  4. 今日总结

    (1)dom简介

    <!DOCTYPE html









    sass

    sss


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus
    minima magni neque provident non nobis mollitia modi. Aliquam perferendis enim possimus neque molesti
    as nihil iure pariatur fuga similique veritatis?

    ffff




    (2)dom获取节点

    <!DOCTYPE html>








    Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Nam labore eveniet ratione nisi totam a fuga hic v
    itae obcaecati ea! Quam repellat sapiente vitae recusand
    ae sequi minima, consectetur culpa dolores!


    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam similique asperiores itaque?
    Laudantium
    necessitatibus numquam optio temporibus quasi saepe nostrum. Officiis aperiam quas dicta vel nobis quod deserunt
    in nisi.


    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, ipsam facere eos quisquam
    consequuntur
    aspernatur doloremque! Quisquam porro, maiores sequi voluptatem vero vel fugiat, quam, autem amet quidem
    voluptate assumenda.




    (3)dom通过标签获取元素

    <!DOCTYPE html>








    Lorem ipsum dolor sit amet consectetur adipisicing elit. Et consequatur tempore consequuntur harum maxime quos
    suscipit architecto vitae vero. Explicabo provident minima expedita consequuntur rerum similique nesciunt enim
    ab adipisci!


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum omnis harum nihil accusantium odio corporis
    span的内容
    pariatur, beatae, deserunt possimus quae aliquid ipsum ab itaque fugiat sequi deleniti numquam saepe velit.




    (4)修改样式

    <!DOCTYPE html>








    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, suscipit provident amet cupiditate numquam
    est quae dolorum nostrum blanditiis autem deleniti laboriosam. Nam, ex. Eaque accusamus error magnam cum
    accusantium!


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt quod error reiciendis facere nesciunt
    deleniti iure alias rerum officiis in nam doloribus nobis itaque, maiores corporis beatae fugit nostrum.


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, suscipit provident amet cupiditate numquam
    est quae dolorum nostrum blanditiis autem deleniti laboriosam. Nam, ex. Eaque accusamus error magnam cum
    accusantium!


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt quod error reiciendis facere nesciunt
    deleniti iure alias rerum officiis in nam doloribus nobis itaque, maiores corporis beatae fugit nostrum.


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, suscipit provident amet cupiditate numquam
    est quae dolorum nostrum blanditiis autem deleniti laboriosam. Nam, ex. Eaque accusamus error magnam cum
    accusantium!


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt quod error reiciendis facere nesciunt
    deleniti iure alias rerum officiis in nam doloribus nobis itaque, maiores corporis beatae fugit nostrum.




    (5)属性的操作

    <!DOCTYPE html>









    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, et reprehenderit quaerat
    id veniam
    sed velit officia maxime amet voluptas, laboriosam, repudiandae recusandae cupiditate. Inventore enim
    consectetur sint cumque quidem?




    (6)文档操作

    <!DOCTYPE html>













    (7)appendChild

    <!DOCTYPE html>








    我是span标签




    (8)插入节点

    <!DOCTYPE html>









    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ipsa facilis, consequuntur explicabo
    architecto sed illum minus totam asperiores a, eius neque quam repudiandae quos, facere pariatur repellendus
    nemo natus?



    新的span


    (9)替换节点

    <!DOCTYPE html>











    已存在替身




    (10)删除节点

    <!DOCTYPE html>








    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, eaque voluptate accusamus, repellendus
    voluptatibus consectetur iste modi molestiae temporibus nemo, sunt voluptas quidem optio. Cum perferendis nisi
    exercitationem praesentium vitae.




    (11)克隆节点

    <!DOCTYPE html>









    faskhfasjhfjahsf
    我是span







    (12)节点的关系

    <!DOCTYPE html>









    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos aperiam voluptatem dolore velit vel
    facere
    aut quas perspiciatis? Eligendi
    accusamus totam in illum excepturi libero repellat illo ad, et nemo?
    span标签







    (13)节点值

    <!DOCTYPE html>








    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat officia adipisci sequi aut qui quam
    dolorum
    maxime. Magnam nesciunt minima a quidem modi! Dicta in necessitatibus cumque rerum reprehenderit alias.




    (14)点击事件

    <!DOCTYPE html>













    JavaScript-Dom操作

    1. 从ECMA到W3C

我们知道，ECMA定义的是js的变量语法等基础的标准规范，而W3C是针对浏览器API提出的规范， 所以我们要工作不可能只了解语法，我们的代码要在浏览器上跑起来就需要我们去了解W3C的标准。
那么W3C规定了哪一系列的的API呢，DOM、BOM、AJAX、事件、存储等等。
window.document.getElementById()，这东西相信大家都非常的熟悉，有没有觉得有点疑惑的地方document这东西是什么，在js基础中并没有这么一个对象，而这个就是W3C提出的浏览器内置更多的对象之一。

1.1 API的概念

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组程序的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
总之API就是为我们程序员提供了一个接口，帮助我们实现某种功能。

1.2 Web API的概念

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框， 直接使用 alert(‘弹出’)

MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

2. 什么是DOM？

HTML DOM 是W3C （万维网联盟）制订的一套标准，标准中定义了所有 HTML元素的对象和属性，以及访问它们的方法。换言之，HTML DOM是关于如何获取、修改、添加或删除 HTML 元素的标准。
注意：DOM 是 Document Object Model（文档对象模型）的缩写。

3. DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

    4. DOM 节点树

我们在了解DOM的时候，首先需要了解到一个DOM树的结构，这是一种树形的数据结构。下图就是DOM文档渲染出来的DOM树。DOM 将 HTML 文档视为树形结构。这种结构被称为节点树：
📝第十一天 每日总结(JavaScript中的dom) - 图1

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

  • 文档：一个页面就是一个文档，DOM中使用document表示
  • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。
  • 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示，DOM把以上内容都看做对象。（对象可以有属性和方法）
  • 通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML元素（节点）均可被修改，也可以创建或删除节点。

5. DOM的方法和属性

HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

6. 节点之间的关系

节点树中的节点彼此拥有层级关系，我们可以使用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子节点
  • 同胞是拥有相同父节点的节点

7. 获取元素节点

为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

假设页面中包含如下代码，我们怎样使用 DOM 提供的方法获取这些节点呢？

<div id="main"> 
    <div class="box"> <p>段落内容</p> </div> 
    <div class="box"> <p>段落内容</p> </div> 
    <div class="box"> <p>段落内容</p> </div> 
</div>

7.1.1根据 id 获取元素

document.getElementById('main'); // 获取 id 属性值为 main 的元素

7.1.2 根据标签名获取元素

document.getElementsByTagName('p');  // 获取标签名为 p 的元素

7.1.3 根据 class 获取元素

document.getElementsByClassName('box');  // 获取 class 属性值包含 box 类名的元素

7.1.4 获取特殊元素

//1、获取整个文档元素HTML
document.documentElement     
//2、获取body
document.body
//3、获取网页标题
document.title
//4、获取整个网页的URL路径
document.URL        
//5、获取域名
document.domain
//6、获取文档中的form表单集合
document.forms 
//7、获取文档中的img元素集合
document.images 相当于   document.getElementsByTagName('img')
//8、获取文档中带有href属性的a元素集合
document.links

8. 修改节点

<p class="box">段落内容</p> 
<p class="box">段落内容</p> 
<p class="box">段落内容</p>

8.1 改变 HTML 内容

  • 改变元素内容的最简答的方法是使用 innerHTML和innerText 属性。
var boxes = document.getElementsByClassName('box');
boxes.innerHTML = 'Hello DOM'; // 修改段落中文本
boxes.innerText = 'Hello DOMText' // 修改段落中文本
  • 除了修改文本以外，还可以将文本变成 HTML 标签
boxes.innerHTML = '<a href="#">链接</a>'; // 将段落中的文本修改成<a>元素

  • innerText和innerHTML的区别

  • 获取内容时的区别：
    innerText会去除空格和换行，而innerHTML会保留空格和换行

  • 设置内容时的区别：
    innerText不会识别html，而innerHTML会识别。

注意点

除了以上方法，还有outerText和outerHTML也可以改变HTML的内容。但是innerHTML是W3C推荐的。 但是———- outerHTML是把当前标签的全部内容包括标签本身也全部取出来了，进行更换可以识别HTML标签。 outerText是把当前标签的全部内容包括标签本身也全部取出来了，不识别HTML标签。

8.2 改变 CSS 样式

  • 通过 HTML DOM，我们能够访问 HTML 元素的样式对象。
boxes.style.color = '#f00'; // 字体颜色修改成红色
boxes.style.fontSize = '12px'; // 字体大小修改成 12px

8.3 改变 HTML 属性

方法一：

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

方法二：

  • 获取元素的属性值
boxes.getAttribute('class'); // 获取 class 属性的值
  • 给元素添加/修改/删除属性
boxes.setAttribute('title', '段落的title属性内容'); // 设置 title 属性
// 移除属性 removeAttribute(属性)    
 div.removeAttribute('class');

9. 操作HTML元素

<div id="main"> 
<p id="box1">段落内容</p> 
<p id="box2">段落内容</p> 
<p id="box3">段落内容</p> 
</div>
  • 输出到文档

方法：document.write(exp1,exp2,exp3,….)
作用：可以将任意字符串插入在文档中。

document.write("Hello World!");
document.write("<h1>Main title</h1>")
  • 新建节点

方法：document.createElement(tagName)；
作用：根据标签名（tagName）创建新的 DOM 对象。
这个方法只接受一个参数，要创建元素的标签名。例如，下面的代码创建了一个

元素：

var newElement = document.createElement('p'); // 创建新元素 p
  • 新建文本节点
    方法：document.createTextNode(“文本”);
    作用：创建一个文本节点。
var newElement=document.createElement("p");
var textCon=document.createTextNode("Hello World");
newElement.appendChild(textCon);
document.body.appendChild(newElement);
  • 追加节点

方法：parentElement.appendChild(newElement);
作用：追加到父元素内容的后面。

var parentElement = document.getElementById('main'); // 获取父元素
parentElement.appendChild(newElement); // 将新元素追加到父元素内容之后
  • 插入节点

方法：parentElement.insertBefore(newElement, targetElement)
作用：将新创建的元素（newElement）添加到目标元素（targetElement）前面

var parentElement = document.getElementById('main'); // 获取父元素
var targetElement = document.getElementById('box2'); // 获取目标元素
var newElement = document.createElement('p'); // 创建新元素
//将新元素插入到目标元素之前
parentElement.insertBefore(newElement, targetElement);

注意：没有inertAfter这个方法。

  • 替换节点

方法：parentElement.replaceChild(newElement, targetElement)
作用：使用新元素替换目标元素
被替换的节点将从文档树种移除，同时要插入的节点占据其位置。

var parentElement = document.getElementById('main'); // 获取父元素
var targetElement = document.getElementById('box2'); // 获取目标元素
var newElement = document.createElement('p'); // 创建新元素
parentElement.replaceChild(newElement, targetElement); // 使用新元素替换目标元素
  • 删除节点

方法：parentElement.removeChild(childElement);
作用：从父元素（parentElement）中删除一个子元素（childElement）

var parentElement = document.getElementById('main'); // 获取父元素
var childElement = document.getElementById('box2'); // 获取子元素
parentElement.removeChild(childElement); // 将子元素从父元素中删除

注意：以上4个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。另外，并不是所有节点都有子节点，如果在没有子节点的节点上调用这些方法，将会出错。

  • 克隆节点

方法：currentElement.cloneNode(true/false);
作用：复制 DOM 元素。
该方法只接受一个布尔值的参数，true代表深度拷贝，false代表浅拷贝，不传参的话，默认为false。

var currentElement = document.getElementById('main'); // 获取需要复制的元素
currentElement.cloneNode(); // 只复制元素本身，忽略其子元素-false默认
currentElement.cloneNode(true); // 复制元素本身，及其子元素

注意：这个方法是所有节点都有的。如果不传递任何参数，默认只拷贝当前元素节点，如果传递的参数为true，就会进行深度拷贝，也就是被拷贝元素内的所有后代元素都会被复制。

10. 根据DOM节点层次关系获取元素

📝第十一天 每日总结(JavaScript中的dom) - 图2

📝第十一天 每日总结(JavaScript中的dom) - 图3

// 访问父节点(亲爸爸)
console.log(div.parentNode);
// 访问下一个兄弟节点
//包括空白节点(幽灵节点) 
console.log(div.nextSibling);
//IE9以上才支持
console.log(div.nextElementSibling);
// 访问上一个兄弟节点
//包括空白节点(幽灵节点) 
console.log(div.previousSibling);
//IE9以上才支持
console.log(div.previousElementSibling);
// 访问第一个孩子节点
//包括空白节点(幽灵节点) 
console.log(div.firstChild);
//IE9以上才支持
console.log(div.firstElementChild);
// 访问最后一个孩子节点
//包括空白节点(幽灵节点) 
console.log(div.lastChild);
//IE9以上才支持
console.log(div.lastElementChild);
// 访问孩子节点
//包括空白节点(幽灵节点) 
console.log(div.childNodes);
console.log(div.children[1]);

*多学一招

1.节点的类型名称及值


  • nodeType 属性返回节点类型。

如果节点是一个元素节点，nodeType 属性返回 1。
如果节点是属性节点, nodeType 属性返回 2。
如果节点是一个文本节点，nodeType 属性返回 3。
如果节点是一个注释节点，nodeType 属性返回 8。

  • nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。
如果节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

  • nodeValue 属性设置或返回指定节点的节点值。

2.获取属性节点方法


//获取属性节点
document.getElementById('main').getAttributeNode("class");

自己总结

DOM 方法

getElementsByTagName()可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
即使查询到的元素只有一个，也会封装到数组中返回

根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器

getElementById(id) - 获取带有指定 id 的节点（元素）

DOM修改属性

var p1 = document.getElementsByClassName(“p1”)[0]
// 对类的值进行获取
p1.className;
// 对我们的类的值进行修改
p1.className = “p2”
// 获取属性的值
var prop = p1.getAttribute(“class”);
console.log(prop);//p2
/*
设置属性的方式
参数一：设置的属性名
参数二：设置的属性值

*/
p1.setAttribute(“class”, “p3”);
// 删除指定的标签属性
p1.removeAttribute(“abc”);

DOM增删改查

document.createElement()
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将创建好的对象作为返回值返回

appendChild()
向一个父节点中添加一个新的子节点
用法：父节点.appendChild(子节点);

insertBefore()
- 可以在指定的子节点前插入新的子节点
- 语法：
父节点.insertBefore(新节点,旧节点);

replaceChild()
- 可以使用指定的子节点替换已有的子节点
- 语法：父节点.replaceChild(新节点,旧节点);

removeChild()
- 可以删除一个子节点
- 语法：父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);

cloneNode()
方法：currentElement.cloneNode(true/false);
作用：复制 DOM 元素。
该方法只接受一个布尔值的参数，true代表深度拷贝，false代表浅拷贝，不传参的话，默认为false。

伪数组

伪数组 有索引 可通过下标获取长度 可遍历 最大区别就是没有数组的方法
// 自定义伪数组
var obj = {
0: “a”,
1: “b”,
length: 2
};

inerHTML和innerText和outerHTML

  ** innerText(获取标签内部，不包含自身标签)**<br />**       获取标签内部所有的文本，包括子元素内的文本**<br />**       若修改则覆盖标签内所有的内容**<br />** **<br />**        innerHTML(获取标签内部，不包含自身标签)**<br />**        获取标签内部的html字符串，包括空格**<br />**        若修改，会解析字符内的标签**<br />**            **<br />**        outerHTML(获取标签，包含自身标签)**<br />**        获取标签的html字符串，包括空格**<br />**         若修改，会解析字符内的标签,且改变自身标签,且pTags.length也会改变**<br />**        要想全部改变；记得i--**<br />**                **<br />**           **
  • 获取内容时的区别：
    innerText会去除空格和换行，而innerHTML会保留空格和换行


  • 设置内容时的区别：
    innerText不会识别html，而innerHTML会识别。

**

注意点

除了以上方法，还有outerText和outerHTML也可以改变HTML的内容。但是innerHTML是W3C推荐的。 但是———- outerHTML是把当前标签的全部内容包括标签本身也全部取出来了，进行更换可以识别HTML标签。 outerText是把当前标签的全部内容包括标签本身也全部取出来了，不识别HTML标签。

根据DOM节点层次关系获取元素

// 访问父节点(亲爸爸)
console.log(div.parentNode);
// 访问下一个兄弟节点
//包括空白节点(幽灵节点) 
console.log(div.nextSibling);
//IE9以上才支持
console.log(div.nextElementSibling);
// 访问上一个兄弟节点
//包括空白节点(幽灵节点) 
console.log(div.previousSibling);
//IE9以上才支持
console.log(div.previousElementSibling);
// 访问第一个孩子节点
//包括空白节点(幽灵节点) 
console.log(div.firstChild);
//IE9以上才支持
console.log(div.firstElementChild);
// 访问最后一个孩子节点
//包括空白节点(幽灵节点) 
console.log(div.lastChild);
//IE9以上才支持
console.log(div.lastElementChild);
// 访问孩子节点
//包括空白节点(幽灵节点) 
console.log(div.childNodes);
console.log(div.children[1]);

1.节点的类型名称及值


  • nodeType 属性返回节点类型。

如果节点是一个元素节点，nodeType 属性返回 1。
如果节点是属性节点, nodeType 属性返回 2。
如果节点是一个文本节点，nodeType 属性返回 3。
如果节点是一个注释节点，nodeType 属性返回 8。

  • nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。
如果节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

  • nodeValue 属性设置或返回指定节点的节点值。

2.获取属性节点方法


//获取属性节点
document.getElementById('main').getAttributeNode("class");