Day09 DOM

最新推荐文章于 2023-04-12 11:34:45 发布

H_Z_W001

最新推荐文章于 2023-04-12 11:34:45 发布

阅读量63

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/H_Z_W001/article/details/127559989

版权

DOM的概述

DOM（document object model）文档对象模型，顾名思义他就是用于操作对应的文档的，也就是操作你写的html文档。DOM是一个遵从文档流的语句。所以他是同步机制。

DOM的分类

docement.dom操作中最大的对象（表示当前操作html文档）
element元素对象（表示的事对应的标签元素）
attribute属性对象（表示的所有的html标签里面的属性）
text文本对象（表示崽html代码里面写的所有的文本）

document里面存在对应的element也就是说我们可以通过document去获取element。element里面存在对应的text，通过element来获取对应的text，element存在attribute也就是说我们可以通过对应的element来获取对应的sttribute

从上可得对应的document可以操作element，也可以操作对应的text和attribute

DOM（document object model）文档对象模型（document文档对象，element元素对象，text文本对象，attribute属性对象）

document（文档对象）（*）

方法

获取通过对应的标识来获取element元素

document.getElementById 通过id获取对应的元素（Element）

//通过对应的id获取相关元素对象 返回的是一个element对象
var box = document.getElementById('box')
console.log(box)

document.getElementByClassName通过className获取（HTMLCollection）

//通过对应的class获取相关元素对象数组（HTMLCollection（伪数组 具备下标 具备length））
var contents = document.getElementByClassName('content')
console.log(contents);//获取HTMLCollection
consol。log(contents)[0];//获取第一个匹配的元素

document.getElementByTagName通过标签名获取（HTMLCoellction）

//通过标签名获取对应的元素对象数组
var div = document.getElementByTagName('div')
console.log(div)//HTMLCollection
console.log(div[0])//获取第一个匹配的元素

document.getElemnetsByName通过name属性获取（Nodelist）

//根据name属性名来获取对应的元素（表单元素）Nodelist

document。querySelector通过选择器获取第一个（Element）

//根据对应的选择器获取 id # class . 标签 标签名 返回的都是元素对象
//querySelector获取匹配选择器的第一个元素
console.log(document.querySelector('#box'))//返回匹配的元素对象
console.log(document.querySelector('.content'))//返回第一个找到的元素
console.log(document.querySelector('div'))//返回第一个找到的元素
console.log(document.querySelector('div:nth-child(1)'))//返回第一个找到的元素

document.querySelectorAll通过选择器获取所有（NodeList）

//根据对应的选择器获取所有的匹配的NodeList的伪数组
console.log(document.querySelectorArr('#box'));
console.log(document.querySelectorArr('.content'));
console.log(docuemnt.querySelectorArr('div'));
//NodeList和HTMLCollection的区别NodeList里面的储存以键值对储存

document.getRootNode获取根节点（Node）

//根节点
console.log(document.getRootNode());

创建相关方法，创建对应的节点对象

document.createElement创建元素节点

//创建一个元素，传递对应的标签名
var element = document.createElement('div');
console.log(element);

document.createAttribute创建属性节点

//创建属性id = 'box'传递属性名
//创建一个id属性，默认值为空字符串
var attr = document.createAttribute('id')
//给当前属性对象指定对应的属性值
attr.value = 'hello world'
console.log(attr);//"hello world"
console.log(typeof attr);//object

document.createTextNode创建文本节点

//创建文本节点，传递的参数是显示的文本
var text = document.createTeztNode('hello')
console.log(text);//"hello"
console.log(typeof text);//object

属性

获取属于文档的相关内容

document.body获取body

document.body

document.head获取head

document.head

document.froms获取froms（返回一个HTMLCollection）

document.froms

Element元素对象（*）

方法

获取的方法（在元素里面获取元素）（跟对应的document的获取元素方法一致）

element.getElementById()
element.getElementByClass()
element.getElementByName()
elment.getElementByTagName()
element.querySelector()
...

//获取对应的element元素对象
var box = document.getElementById('box')
//在对应的box里面获取对应的元素
var link box.getElementByClassName('link')[0]
console.log(link);
//形成链式调用
var b = document.getElementsById('box').getElementByClassName('link')[0].getElementByTagName('b')[0]
console.log(b);

调用的方法（在元素里面添加元素或者是添加text添加到对应的元素中去）

追加到末尾的方法

append(追加多个支持里面传入字符串)（字符串会被识别为文本）

appenChild（追加一个只支持node对象）

//获取元素
var box = document.getElementById('box')
//append添加child子类
//在append传入对应的string类型的值就是添加文本 传入对应的node可以添加文本 也可以添加元素
var p = document.createElement('p')
var text = document.createTxteNode('我是文本')
//对于已经添加的元素不能重复添加（重复以最后一次为准）
//append和appendchild都是追加到末尾
box.append('<b>添加的</b>,p,text')//添加多个 支持添加string类型
box.appendChild(p)//添加一个
var strong = document.createElement('strong')
box.appenchild(strong)//添加一个

插入到某个子元素之前

insertBefore 插入元素到某个子元素之前（参数1需要传入的元素、参数2子元素）

//获取元素
var box = document.getElementById('box')
//第一个是对应需要插入的节点 第二个是对应的子节点
var link = box.getElementsByClassName('link')[0]
var strong1 = document.createElement('strong')
box.insertBefore(strong1,link)
//插入只针对第一层的子元素
var b = document.getElementById('box').getElementsByClassName('link')
[0].getElementsByTagName('b')[0]
box.insertBefore(strong1,b) //错误的 他是孙子节点

insertAdjacentElement 插入element insertAdjacentHTML 插入HTML代码 insertAdjacentText 插入文本

// 'beforebegin': 在该元素本身的前面。
// 'afterbegin':只在该元素当中，在该元素第一个子孩子前面。
// 'beforeend':只在该元素当中，在该元素最后一个子孩子后面。
// 'afterend': 在该元素本身的后面。
var hello = document.createElement('hello')
box.insertAdjacentElement('beforebegin',hello)
box.insertAdjacentElement('afterbegin',hello)
box.insertAdjacentElement('beforeend',hello)
box.insertAdjacentElement('afterend',hello)
box.insertAdjacentHTML('beforebegin','<b>我是插入的之前的html代码</b>')
box.insertAdjacentText('beforebegin','文本')

删除方法

//删除自己 里面内容都删除
box.remove()
//删除子元素 传递对应的子元素
box.removeChild(link)

remove 删除自身 removeChild 删除子元素

修改方法

replaceChild 一对一替换 replaceChildren 替换所有（可以传递多个参数支持字符串）

//修改方法
//既可以替换元素 也可以替换文本
var btn = document.createElement('button')
var text = document.createTextNode('我是文字')
//第一个新的节点 第二个对应的子节点
box.replaceChild(btn,link)
//替换里面所有的 变成你传入的
box.replaceChildren('你好',text,btn)

克隆的方法

cloneNode

<div>
	<a href="hello">你好</a>
</div>
<script>
	var box = document.querySelector('div')
	//克隆对应的元素 传递的参数是一个布尔类型的值 为true表示深度克隆 为false表示浅克隆
 （false）
	var element = box.cloneNode()//只克隆对应的第一次 默认为false
	console.log(element);//<div></div>
	var element = box.cloneNode(true)//只克隆所有的内容包含对应的里面文本和元素及相关事
件
	console.log(element);//完整克隆
</script>

属性操作的相关方法 (对于所有的属性都可以进行操作

获取 getAttribute(attrName) 设置 setAttribute(attrName,attrValue) 删除 removeAttribute(attrName)

//获取属性 通过属性名来获取属性值 后面带NS 表示namespace 命令空间
//传递的是属性名
var attrVal = box.getAttribute('hello')
console.log(attrVal);//hi
//设置属性
//第一个参数属性名 第二个参数为属性值(自动发生隐式转换)
box.setAttribute('age',18)//添加
box.setAttribute('age','20')//修改
//移除属性 根据属性名来移除对应的属性 对于本身带的和后续添加的都可以进行操作
box.removeAttribute('hello')
box.removeAttribute('age')

属性

基础属性

id 属性（获取/设置 id值）
className 属性（获取/设置 class值）
style 属性（获取对应的一个样式对象 / 设置相关样式）
title 属性（获取/设置 title属性）
tagName 属性（只读属性）
innerHTML 属性（显示的html内容编译对应的html代码）
innerText 属性 (显示的文本不能编译html代码)

<div id="hello" class="你好" title="点我"><b>你好世界</b></div>
<script>
    var div = document.querySelector('div')
    //元素对象的相关属性 不赋值就是获取 赋值就是设置
    console.log(div.id); //获取对应的id属性值
    div.id = 'hi'
    console.log(div.className); //获取对应的class名字
    div.className = '李丹'
    console.log(div.style); //获取一个样式对象 里面相关属性就是对应的css的样式名
    console.log(div.style.backgroundColor); //获取对应的背景颜色的值
    div.style.backgroundColor = 'red' //设置当前的背景颜色为红色
    console.log(div.title); //获取对应的title属性值
    div.title = '你好'
    console.log(div.innerHTML); //获取里面显示的html代码 (可以识别html代码)
    div.innerHTML = '<a>改变的内容</a>'
    console.log(div.innerText); //获取对应显示的文本 （全部当作文本）
    div.innerText = '<a>改变的内容</a>'
    //不能进行赋值操作
    console.log(div.tagName); //获取对应的标签名 大写的标签名（全大小） （只读）
</script>

节点相关属性（只读属性）

previousElementSibling 前面的元素
nextElementSibling 后面的元素
parentElement 父元素
children 子元素集合（HTMLCollection）

//前面的元素
console.log(div.previousElementSibling);
//后面的元素
console.log(div.nextElementSibling);
//获取父元素 parentElement 子元素 children
console.log(div.parentElement);//获取到是一个元素
console.log(div.children);//获取到的是一个元素数组 伪数组 HTMLCollection

相关获取元素内属性节点集合的属性（只读属性）

attributes

//获取元素内所有的属性节点的属性 返回的是一个伪数组 nameNodeMap (伪数组 map他是存储键值对)
var attrs = div.attributes
console.log(attrs);
console.log(attrs[0]); //获取第一个属性对象
console.log(attrs[0].value); //获取第一个属性对象的属性值
console.log(attrs.id); //获取属性名为id的属性对象
console.log(attrs.id.value); //获取属性名为id的属性值
// nameNodeMap对象拥有的方法
//getNamedNodeItem 传入属性名获取对应的属性对象
console.log(attrs.getNamedItem('class'));
//setNamedNodeItem attr表示attribute对象
var attr = document.createAttribute('class')
attr.value = '渣渣辉'
attrs.setNamedItem(attr)
//removeNamedNodeItem
attrs.removeNamedItem('class')
//item方法获取的方法 通过下标获取
console.log(attrs.item(0));

Node

DOM中的节点分类

元素节点 element 属性节点 attributeNode 文本节点 textNode

节点相关的属性

节点划分的属性（*）

nodeName 节点名 nodeType 节点类型 nodeValue 节点值

	nodeType	nodeName	nodeValue
element	1	标签名	null
attribute	2	属性名	属性值
text	3	#text	文本值

var att = document.createAttribute('class')
att.value = 'box'
var ele = document.createElement('h1')
ele.innerText = 'hello'
var txt = document.createTextNode('文本节点')
//nodeName
console.log(att.nodeName); //属性对应的是属性名
console.log(ele.nodeName); //元素对应的是标签名
console.log(txt.nodeName); //文本对应的是#text
//nodeType (以数值进行划分的 1 2 3 )
console.log(att.nodeType); // 2
console.log(ele.nodeType); // 1
console.log(txt.nodeType); // 3
//nodeValue
console.log(att.nodeValue); // 属性得到是对应的属性值
console.log(ele.nodeValue); // 元素节点得到是null
console.log(txt.nodeValue); // 得到对应的文本值

节点关系的属性（*）

父子

parentElement 父元素 parentNode 父节点 childNodes 所有的子节点（包含元素节点和文本节点） children 所有的元素节点

兄弟关系

previousElementSibling 上一个元素节点 previousSibling 上一个节点 nextElementSibling 下一个元素节点 nextSibling 下一个节点

第一个子节点和最后一个子节点

firstChild 第一个子节点 firstElementChild 第一个子元素节点 lastChild 最后一个子节点 lastElementChild 最后一个子元素节点

<div>
	hello
	<a href="">你好</a>
	<p>
		<a href="">前面的元素节点</a>
		你好
		<a href="">后面的元素节点</a>
	</p>
	你好
</div>
<script>
    //节点的相关关系
    var p = document.querySelector('p')
    //父子关系
    //获取对应的父节点 (一般情况俩者是一样的)
    console.log(p.parentElement); //得到父元素
    console.log(p.parentNode); //得到父节点
    //获取子节点
	console.log(p.parentNode.childNodes); //获取子节点 （包含元素 包含文本） nodeList
    //俩个文本 加上一个p标签
    console.log(p.parentNode.children); //获取子元素 （只包含元素节点）HTMLCollection
    p标签
    //兄弟关系
    //上一个
    console.log(p.previousElementSibling); //上一个元素节点
    console.log(p.previousSibling); //上一个节点 （空文本也算节点）
    // 下一个
    console.log(p.nextElementSibling); //下一个元素节点
    console.log(p.nextSibling); //下一个节点
    //第一个子节点
    console.log(p.firstChild); //空文本
    console.log(p.firstElementChild);//a标签
    //最后一个子节点
    console.log(p.lastChild); //空文本
    console.log(p.lastElementChild); //a标签
    </script>

节点相关的方法（*）

replaceChild 替换子节点
appendChild 添加子节点
removeChild 删除子节点 insertBefore 插入节点到子节点前面
cloneNode 克隆节点
replaceChildren 替换所有子节点
append 添加多个子节点
remove 移除自己及所有的子节点

操作属性节点的方法

setAttributeNode （属性节点 Attribute对象） getAttributeNode （返回的是一个属性节点 Attribute） removeAttributeNode （根据对应的属性节点删除）

<div id="box"></div>
<script>
    //运用相对较少
    var box = document.getElementById('box')
    //获取属性节点 返回时一个attribute对象
    //传入一个string类型的属性名
    console.log( box.getAttributeNode('id'));
    console.log( box.getAttributeNode('id').value);
    //设置对应的属性节点 传入的是一个attribute对象
    var attr = document.createAttribute('class')
    attr.value = 'content'
    box.setAttributeNode(attr)
    //removeAttributeNode 根据属性节点对象来删除删除对应的属性节点
    box.removeAttributeNode(box.attributes[0]) //删除第一个属性节点
</script>

删除空文本节点的相关方法

<div>
	<a href="">嘻嘻</a>
	<b>哈哈</b>
	hello
</div>
<script>
    var div = document.querySelector('div')
    //获取div的所有子节点
    console.log(div.childNodes.length);//5
    //传入一个元素 删除里面的空文本节点
    function deleteEmptyTextNode(element){
        //获取所有的子节点
        var nodes = element.childNodes
        //遍历所有的子节点
        for(var node of nodes){
            //进行判断 判断当前是否为空文本节点
            if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){
                //删除对应的空文本节点
                element.removeChild(node)
            }
        }
    }
    deleteEmptyTextNode(div)
    console.log(div.childNodes.length);//3
</script>