当前位置：首页 > news >正文

DOM基础应用

news 来源：原创 2024/5/18 11:50:04

文章目录

- 1、DOM简介
- - - 1、DOM 概念
    - 2、DOM 树
    - 3、DOM操作步骤
    - ４、DOM获取页面元素
    - - 1、根据id获取元素
      - 2、根据类名class获取元素
      - 3、根据标签名获取元素
      - 4.根据属性名获取元素
      - 5、H5新增的两个方法
      - 6、系统提供的直接获取的方式
      - 7、通过关系获取
      - 节点和元素的区别：
        拓展：
    - 5、节点增删改查
    - - bug:
    - 拓展：
    - - 1、calc() 函数
      - 2、盒子居中的六种常用方法？

1、DOM简介

1、DOM 概念

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

总结：W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式。

2、DOM 树

在这里插入图片描述

DOM 又称为文档树模型

（1）文档：一个网页可以称为文档，DOM中使用 document 表示

（2）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用 node 表示

（3）元素：网页中的标签，DOM中使用 element 表示

（4）属性：标签的属性

注：DOM 把文档、节点、元素都看作是对象

3、DOM操作步骤

获取元素；
给获取的元素绑定事件（如点击事件）；
添加事件处理（什么时机做什么操作）。

４、DOM获取页面元素

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

HTML内容，一下获取元素的方式由此为例：

<div class="box1">
        <div id="box2">
            <div class="4">4</div>
        </div>
        <div class="box3">3</div>
    </div>
    <input type="text" name="input1">

1、根据id获取元素

document.getElementById//查找速度最快传入的是id的名字而不是id选择器，不加#

var box2 = document.getElementById('box2');
console.log(box2);

2、根据类名class获取元素

document.getElementsByClassName

var box1 = document.getElementsByClassName('box1');
console.log(box1);

3、根据标签名获取元素

document.getElementsByTagName

var divs = document.getElementsByTagName('div');
console.log(divs);

4.根据属性名获取元素

document.getElementsByName

var input1 = document.getElementsByName('input1');
console.log(input1);

5、H5新增的两个方法

document.querySelector 获取第一个符合条件的元素
document.querySelectorAll 获取全部符合条件的多个元素

var box1 = document.querySelector('.box1')
console.log(box1);


//获取全部的div
var boxs = document.querySelectorAll('div')
console.log(boxs);


//获取box1的子元素box2
var box2 = document.querySelectorAll('.box1 #box2')
console.log(box2);

6、系统提供的直接获取的方式

document.body  //body标签   最常用
document.forms  //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址  常用于获取网页之后剪切到对象中，进行进一步的操作。

总结：

H5的技术虽然好用，但是 document.getElementById（）的查找速度最快，项目对应的效率就高。具体使用哪种方式根据实际情况选择使用。
如果获取的是一个，没找到则返回null；如果获取多个，找到了返回的是一个类数组，没找到则返回空数组。
整个文档是节点树，标签是元素。
HTML的父元素是null ，父节点是document。
以上获取元素的方式只有通过id选择是document.getElementById（） Element是没有加s的，很容易理解，id不能重名，有且只有一个，所以如果没有找到，返回null。

7、通过关系获取

节点和元素的区别：

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）
注释是注释节点

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点。

通过父级获取：父元素和父节点是同一个。

HTML例外：HTML的父元素是null ，父节点是document。

var re=document.getElementById("div1").parentElement//父元素
var re=document.getElementById("div1").parentNode//父节点

通过子级获取：子元素和子节点不一定是同一个。

var son1=document.getElementById("box1").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes //返回值是子节点们 没有返回空数组 包括text 空格 换行等节点
console.log(son1)

通过兄弟节点获取

var re = document.getElementById("box4").nextSibling//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("box3").previousSibling//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling //上一个兄弟元素 没有返回null
console.log(re)

第一个子节点

var son1=document.getElementById("box1").firstChild   //第一个子节点 
var son2=document.getElementById("box1").firstElementChild  //第一个子元素
console.log(son1,son2)


//或者通过所有子节点|子元素的下标获取
fa.children[0]
fa.childNodes[0]

最后一个子节点

var son1=document.getElementById("box1").lastChild   //最后一个子节点
var son2=document.getElementById("box1").lastElementChild  //最后一个子元素

拓展：

获取自己是父元素中的第几个子元素/节点

官方没有提供，需要自己实现这个方法:调用者是父元素中的第几个元素 .index()

 Object.prototype.index2=function() {
 	var arr=this.parentElement.children//或者childNodes
 	for (let i = 0;i<arr.length;i++) {
 		if(this==arr[i]){
 			return i
			}
 	}
 }

父元素中的第几个子元素/节点

var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点

5、节点增删改查

查

获取节点： document.querySelect( )
增
- 创建节点：document.createElement(‘div’) //不会渲染到页面上，因为他不在DOM中。
- 添加到文档树中：x.appendChild( y) 把创建的节点对象y，添加到获取到x节点中。
- 增加多个类名：box.classList.add(‘类名1’) box.classList.add(‘类名2’) ==>
- 删除类名：box.classList.remove(‘类名’)
```
var box=document.querySelector('div');

<div class='类名1 类名2'> </div>
```
bug:
```
box2.appendChild(box3);
box2.innerHTML='66666'
```
同时在box2中加入节点，和文本，会只添加6666，因为他认为innerHTML 是在写代码，就会忽略外面的操作。

解决方案：？？？？？
1. 创建一个元素，把6666作为他的innerHTML，然后把他添加到box2中
2. 模板字符串拼接：box2.innerHTML +=‘6666’

删

通过父节点删除子节点

var box=document.querySelector('#box');
box.parentElement.removeChild(box);

自己移除
```
box.remove()
```
清空自己 : 把innerHTML设置为空
```
box.parentElement.innerHTML='';
```

插入数据插入到当前节点之前 insertBefore( )

官方没有提供insertAfter 插入到后面这个函数，只有自己封装实现该功能。

<div class="fa">点我
    <div class="sn">

    </div>
</div>

var box=document.querySelector('.box');
var a1=document.createElement('h1');
box.innertBefore(a1,box2);

克隆

var box=document.querySelector('#box');
var box2=box.cloneNode();//里面填true：连同box的后代元素和事件一起
box.appendChild(box2);

注意：页面上已经存在的引用对象克隆之后不会产生新的，只是移了位置。？？？？

JSON：js一种格式的字符串

拓展：

1、calc() 函数

1.定义

calc() 函数用于动态计算长度值。

2.用法

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

2、盒子居中的六种常用方法？

绝对定位加margin：auto；

position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

绝对定位+ 负margin

position: absolute;
top:50%;
left:50%;
margin:-高/2 -宽/2;

绝对定位配合calc()计算方法

position: absolute;
top:calc(50%-高/2);
left:calc(50%-宽/2);

绝对定位配合+位移

position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)

弹性盒子布局（flex布局）

display: flex;
justify-content: center;
align-items: center;

grid布局

display: grid;
align-self: center;
justify-self: center;

将小div转成inline-block

<style>
    .box{
        width: 600px;
        height: 600px;
        background-color: blue;
        text-align: center;  /*！*/
        line-height: 600px;  /*！*/
    }
    .a1{
        width: 100px;
        height: 100px;
        background-color: black;
        display: inline-block;   /*!*/
        vertical-align: middle;  /*！*/
    }
</style>

<div class="box">
    <div class="a1"></div>
    <span></span>
</div>