DOM概述

  1.     DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）<br />        浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口<br />        DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言

节点

  1.     DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22272964/1650038942521-31e69a4d-2dd9-4aa1-b9a3-093483951941.png#clientId=ub0efa4c1-a420-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=253&id=u102e3cc9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=642&originWidth=617&originalType=binary&ratio=1&rotation=0&showTitle=false&size=374906&status=done&style=none&taskId=u7c62e192-ed16-4e3d-a2ab-fc8971345fd&title=&width=243.5)<br />节点的类型有七种
  • Document：整个文档树的顶层节点（.html文件）
  • DocumentType：doctype标签 （H5声明）
  • Element：网页的各种HTML标签
  • Attribute：网页元素的属性（比如class=”right”）
  • Text：标签之间或标签包含的文本
  • Comment：注释
  • DocumentFragment：文档的片段

document对象_属性

image.png
document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用

document.doctype

指向节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE html>。如果网页没有声明 DTD，该属性返回null

  1. var doctype = document.doctype;
  2. doctype // "<!DOCTYPE html>"

document.documentElement

返回当前文档的根节点（root），一般是节点

document.forms/

返回所有

表单节点

document.images

返回页面所有DOM模型 - 图2图片节点

  1. var imglist = document.images;
  3. for(var i = 0; i < imglist.length; i++) {
  4.   if (imglist[i].src === 'banner.png') {
  5.     // ...
  6.   }
  7. }

document.scripts

返回当前文档的域名

  1. document.domain;  // www.yuque.com

document对象_方法/获取元素

image.png

document.getElementsByClassName()

document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中

  1. var elements = document.getElementsByClassName(names);

document.getElementById()

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null

  1. var elem = document.getElementById('para1');

⚠️ 注意：该方法的参数是大小写敏感的。eg:如果某个节点的id属性是main，那么document.getElementById(‘Main’)将返回null

document对象_方法/创建元素


image.png

document.createElement()

document.createElement方法用来生成元素节点，并返回该节点

  1. var newDiv = document.createElement('div');

document.createTextNode()

document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容

  1. var newDiv = document.createElement('div');
  2. var newContent = document.createTextNode('Hello');
  3. newDiv.appendChild(newContent);

document.createAttribute()

document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它

  1. var attribute = document.createAttribute(name);
  3. var root = document.getElementById('root');
  4. var it = document.createAttribute('zzcode');
  5. it.value = 'it';
  6. root.setAttributeNode(it);

Element对象_属性

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）

Element.id

Element.id属性返回指定元素的id属性，该属性可读写

  1. // HTML 代码为 <p id="foo">
  2. var p = document.querySelector('p');
  3. p.id // "foo"

Element.className

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割

  1. // HTML 代码 <div class="one two three" id="myDiv"></div>
  2. var div = document.getElementById('myDiv');
  3. div.className

Element.classList

classList对象有下列方法

  • add()：增加一个 class。
  • remove()：移除一个 class。
  • contains()：检查当前元素是否包含某个 class。
  • toggle()：将某个 class 移入或移出当前元素。

    Element.innerHTML

    Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括和元素

    Element.innerText

    innerText和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串

Element获取元素位置

属性 描述
clientHeight 获取元素高度包括padding部分，但是不包括border、margin
clientWidth 获取元素宽度包括padding部分，但是不包括border、margin
clientLeft 元素节点左边框（left border）的宽度
clientTop 元素节点上边框（top border）的高度
scrollHeight 元素总高度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollWidth 元素总宽度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollLeft 元素的水平滚动条向右滚动的像素数量
scrollTop 元素的垂直滚动条向下滚动的像素数量
offsetHeight 元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth 元素的 CSS 水平宽度（单位像素），包括元素本身的高度、padding 和 border
offsetLeft 到定位父级左边界的间距
offsetTop 到定位父级上边界的间距

Element对象_方法

image.png

Element.focus() 添加焦点

Element.blur() 移除焦点

Element.remove() 移除元素

Element.getBoundingClientRect() 获取css信息

  • x：元素左上角相对于视口的横坐标
  • y：元素左上角相对于视口的纵坐标
  • height：元素高度
  • width：元素宽度
  • left：元素左上角相对于视口的横坐标，与x属性相等
  • right：元素右边界相对于视口的横坐标（等于x + width）
  • top：元素顶部相对于视口的纵坐标，与y属性相等

  • bottom：元素底部相对于视口的纵坐标（等于y + height）

    Attribute属性的操作

    image.png
    HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）
    元素节点提供四个方法，用来操作属性

  • getAttribute()

  • setAttribute()
  • hasAttribute()
  • removeAttribute()

    Element.getAttribute()

    返回当前元素节点的指定属性。如果指定属性不存在，则返回null（获取属性值）
    1. // HTML代码为
    2. // <div id="div1" align="left">
    3. var div = document.getElementById('div1');
    4. div.getAttribute('align') // "left"

    Element.setAttribute()

    用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性（新增/修改属性） ```javascript var d = document.getElementById(‘d1’); d.setAttribute(‘align’, ‘center’);

//对img元素的src属性赋值 var myImage = document.querySelector(‘img’); myImage.setAttribute(‘src’, ‘images/girl.png’);

  1. <a name="sgvtZ"></a>
  2. ### Element.hasAttribute()
  3. 返回一个布尔值，表示当前元素节点是否包含指定属性
  4. ```javascript
  5. ar d = document.getElementById('box');
  7. if (d.hasAttribute('align')) {
  8.   d.setAttribute('align', 'center');
  9. }

Element.removeAttribute()

用于从当前元素节点移除属性

  1. // HTML 代码为
  2. // <div id="box" align="left" width="200px">
  3. document.getElementById('box').removeAttribute('align');
  4. // 现在的HTML代码为
  5. // <div id="box" width="200px">

dataset 属性（自定义属性）

有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性
使用标准提供的data-*属性