2025年DOM相关属性及方法

大家好，我是讯享网，很高兴认识大家。

概述

DOM全称（document object model）文档对象模型（文档指定为对应的html文档），对应的DOM就是操作HTML文档的（增删改查），DOM是一个遵从文档流的语句。所以他是同步机制。

DOM结构

1、document DOM操作中最大的对象

2、element 元素对象（表示的是对应的标签元素）

3、attribute 属性对象（表示的是所有的html标签里面的属性）

4、text 文本对象（表示在html代码里面写的所有的文本）

*/ 文本对象一般和元素对象是包含和被包含的关系

讯享网

document 文档对象(*)

方法

1.获取全局的内容通过对应的标识来获取对应的element元素

document.getElementById() //通过id属性来获取元素，返回的是一个元素（Element） document.getElementsByClassName() //通过class属性名来获取元素，返回的是一个伪数组（HTMLCollection） document.getElementsByTagName() //通过标签名获取元素 返回的是一个伪数组（HTMLCollection） document.getElementsByName() //通过name属性来获取元素 返回的是一个伪数组（NodeList） document.querySeletorAll() //通过对应的选择器进行获取，返回的是一个伪数组（NodeList） document.querySeletor() //通过选择器获取元素，返回的是第一个而查找到的元素（Element） document.getRootNode() //获取根节点

讯享网

2.创建全局的内容

创建元素 document.createElement() 返回的是一个元素

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

创建属性 document.createAttribute() 返回的是一个属性对象

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

创建文本节点 document.createTextNode() 返回的是一个文本节点对象

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

属性

获取属于文档的相关内容

document.head //获取head标签

document.head

document.body //获取body标签

讯享网document.body

document.forms //获取所有的表单标签返回的是一个HTMLCollection，是一个伪数组

document.forms

...

3.删除全局的内容

Element 元素对象（*）

方法

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

讯享网element.getElementById() element.getElementByClassName() element.getElementByTagName() element.getElementByName() element.querySelector() element.querySelectorAll() //...

//获取对应的element元素对象 var box = document.getElementById('box') //在对应box里面获取对应的元素 var link = box.getElementsByClassName('link')[0] console.log(link); //形成链式调用 var b = document.getElementById('box').getElementsByClassName('link')[0].getElementsByTagName('b')[0]//调用id属性名为box的元素里面的第一个class属性名为link的元素里面的第一个标签为b标签的元素 console.log(b)

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

追加到末尾的方法

append（追加多个支持里面传入字符串（字符串会被识别为文本））
appendChild（追加一个只支持node对象）

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

插入到某个子元素之前

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)//错误的 因为此处的b标签是孙子节点

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

讯享网//element.insertAdjacentElement()方法的position属性:
//beforebegin:指在该element元素的开始前面插入元素
//beforeend:指在该element元素的结束前面的最后一个子元素的后面插入元素
//afterbegin:指在该element元素的开始后的第一个子元素前面插入元素
//afterend:指在该element元素的结束后插入元素
var nav = document.createElement('nav')
box.insertAdjacentElement("beforebegin",nav);
box.insertAdjacentElement("afterbegin",nav);
box.insertAdjacentElement("beforeend",nav);
box.insertAdjacentElement("afterend",nav);
box.insertAdjacentHTML("beforebegin","<i>插入的html代码</i>")
box.insertAdjacentText("beforeend","你在干什么")

删除方法

remove 删除自身
removeChild 删除子元素

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

修改方法

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 attrValue = box.getAttribute('hello') console.log(attrValue);//hi //第一个参数属性名 第二个参数为属性值(自动发生隐式转换) box.setAttribute('age',18)//添加 box.setAttribute('age','20');//修改 // 移除属性 根据属性名来移除对应的属性 对于本身带的和后续添加的都可以进行操作 box.removeAttribute('hello') box.removeAttribute('age')

属性

基础属性

class属性（获取/设置class值）
id属性（获取/设置id值）
style属性（获取/设置对应的样式）
title属性（获取/设置对应的title属性）
tagName（只读属性）
name属性
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 = 'blue'; //设置当前的背景颜色为蓝色
        console.log(div.title);//获取对应的title属性值
        div.title = '我去'
        console.log(div.innerHTML);//获取里面显示的html代码（可以识别HTML代码）
        div.innerHTML = '<i>你好呀，在干嘛</i>';
        console.log(div.innerText);//获取对应显示的文本（全部当作文本）
        div.innerText = '<b>在干嘛</b>'
        //只有tagName是不能进行赋值操作的，他是个只读属性
        console.log(div.tagName);//获取对应的标签名 大写的标签名（全大写）
    </script>

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

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

讯享网//获取前面的内容 后面的内容 var div = document.querySelector('div'); //pre next //前面的元素 console.log(div.previousElementSibling); //后面的元素 console.log(div.nextElementSibling); //获取父元素 parentElement 子元素 children console.log(div.parentElement);//获取到的是一个元素 console.log(div.children);//获取到的是一个元素数组

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

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'); var ele = document.createElement('h1'); 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>

2025年DOM相关属性及方法

概述

DOM结构

document 文档对象(*)

Element 元素对象（*）

Node

相关推荐