DOM基本认识基础认识作用分类概念结构 DOM对象获取DOM对象设置/修改DOM元素内容设置/修改DOM元

基础认识

PS:

1、渲染的过程：动态数据 ------填充-----》静态结构

作用：

1、使用JS去操作HTML和浏览器，开发网页内容和实现用户交互

2、功能：能够改变页面中的所有 HTML 元素，能够改变页面中的所有 HTML 属性，能够改变页面中的所有 CSS 样式，能够对页面中的所有事件做出反应

分类：

1、DOM（文档对象模型）

2、BOM（浏览器对象模型）

概念

1、Document Object Model，用来呈现以及与任意HTML或XML文档交互的API

2、是浏览器提供的一门专门用来操作网页内容的功能

结构

1、DOM树

一、将HTML文档以树状结构直观的表现出来；

二、描述网页内容关系的名词

三、作用：文档树直观的体现了标签与标签之间的关系

根节点、元素节点、属性节点、文本节点

2、DOM对象

定义：浏览器根据HTML标签生成的JS对象，可查找、可修改

核心思想：将网页内容当做对象来处理

document对象：由DOM提供的一个对象，其属性与方法用来访问和操作网页内容，包含所有网页内容

获取DOM对象

1、精确查找选择页面中的标签元素

2、等等

一、根据CSS选择器获取DOM元素

CSS选择器分类：类选择、id选择、伪类选择、

选择第一个元素

语法：document.querySelector('css选择器')

参数：包含一个或多个有效的CSS选择器--------字符串

返回值：匹配到的第一个元素，一个HTMLElement对象，失败返回null

选择多个元素

语法：document.querySelectotAll('css选择器')

参数：包含一个或多个有效的CSS选择器-------字符串

返回值：CSS选择匹配的NodeList对象集合，失败返回空数组

1、NodeList对象中没有map方法与filter方法

2、NodeList为一个伪数组，有长度有索引，无法使用写的数组方法

代码实现：

//class名选择器
let mya = document.querySelector('.mya')
//id选择器
let myh2 = document.querySelector('#myh2')
//多个元素选择
let spanList = document.querySelectorAll('span')
console.log(spanList);
spanList.forEach((v,i)=>{
        console.log(v,i);
        v.style.color = 'red'
      })
//用法
let item = document.querySelectorAll('span')[index]

二、其他获取元素方式

1、根据id获取一个元素

document.getElementById('id')
//重名id 返回第一个元素，失败返回null

2、根据标签获取一类全部元素

document.getElementByTagName('tagName')
//返回伪数组，有长度索引，但不能使用数组方法
//失败返回空数组

3、根据类名获取所有元素

document.getElementByClassName('className')
//返回伪数组，有长度索引，但不能使用数组方法
//失败返回空数组

\4、DOM树里的唯一标签可以直接引用

let bodyItem = document.body
let htmlItem = document.html
let headItem = document.head
let footerItem = document.footer

点操作的对象为内置属性，自定义属性会忽略操作

常规标签内置属性：

div p span： id class name style a: href img: src alt title input: type max min maxlength value id name class

只读状态：readonly >> input button 选中状态: checked >> radoi checkbox 选项选中状态： selected >> select 禁用状态：disabled >> input button

设置/修改DOM元素内容

一、修改标签元素里的内容

1、document.write()

只能将文本追加到的位置

文本内的标签会被解析

document.write(`我好憨`)

2、documentObject.innerText = str

将文本内容添加/更新到指定标签位置

文本标签不会被解析

不赋值则取值，只返回文本内容

let INFO = document.getElementById('info')
INFO.innerText = '<p>我好憨</p>'

3、documentObject.innerHTML = str

将文本内容添加/更新到指定标签位置

文本包含的标签会被解析，

不赋值则取值，取包括HTML标签在内的所有内容

注意补充转义字符的使用：当解析标签内含有不解析标签字符的解决方法

let INFO = document.getElementById('info')
INFO.innerHTML = '<h3>我好憨</h3>'

inner方法会对原有内容进行覆盖，

innerText不能获取单标签即input表单内的输入文本域内容

设置/修改DOM元素属性

添加修改常用属性

例如：修改href、title、src等

//对象.属性 = 值
let pic = document.querySelector('img')
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'

添加修改元素样式属性

例如：通过轮播图小圆点自动更换颜色样式，滚动图片

1、通过style属性操作css

PS:

1、修改样式通过style属性引出

2、如果属性有-连接符，需要转换为小驼峰命名法

3、赋值的 value 要加上必要单位

documentObject.style.css = value

2.操作类名className操作css

用className代替class关键字

className 直接赋值是覆盖原有的，添加需要连接

documentObject.className = '类名'

//className含标签对象的全部类
domObj.className = `${domObj.className} mydiv`

3、通过classList操作类控制Css

解决clasName 容易覆盖以前类名，通过classList追加

不影响原有类名

classList返回的是:一个包含元素的类名列表

//在元素中添加一个或多个类名。
//如果指定的类名已存在，则不会添加
documentObject.classList.add('类名')
//移除元素中一个或多个类名
//移除不存在的类名，不会报错
documentObject.classList.remove('类名')
//切换一个类？
//toggle(token: string, force?: boolean): boolean
//执行逻辑：token为类名，存在该类则移除并返回false,否则添加返回true，force为设置是否强制添加（true）/删除（false）
documentObject.classList.toggle('类名')
//查找类名,返回Boolean
documentObject.contain(class)
//根据索引查找类，返回类名，失败返回null
documentObject.item(索引)

设置修改表单元素属性

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

//属性数据类型只取Boolean，以表属性是否生效
class.disabled = true;
class.checked = false;
class.selected = true;

定时器----间歇函数

使用场景：间隔性地自动执行代码，倒计时

分类：间歇函数、任务函数

间歇函数

语法：setInterval(function,millise,lang)

参数：function执行函数语句，millise毫秒间隔数，lang可选的语言环境

function不需要加（），setInterval()返回的是一个id数字，

操作对象：为window的定时器容器，类似于window.sessionStorage.getItem

id为定时器容器中的子元素----执行函数对象的索引下标

关闭定时器：clearInterval(var)

PS：clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值，

//data接收的是id参数，typeof为number
let data = setInterval(fun,millise)
//clearInterval是停止容器内函数的执行，并不是清除该子元素
clearInterval(data)

DOM基本认识