DOM的概述
DOM是文档对象模型(document object model) , 顾名思义就是用来操作对应的HTML文档的 .
它是一个遵从文档流的语句 , 是同步机制的 .
DOM的分类
-
document 是dom操作中最大的对象 ( 表示当前操作的html文档 )
-
element 元素对象 ( 表示的是对应的标签元素 )
-
attribute 属性对象 ( 表示的是html标签里所有的属性 )
-
text 文本对象 ( 表示在html代码里面写得所有的文本 )
document ( 文档对象 ) (*)
方法
获取 : 通过对应的表示来获取element元素
-
document.getElementById 通过id获取对应的元素 ( element )
//通过id获取对应的元素,返回的是一个element对象 var box=document.getElementById('box') console.log(box)
//通过class获取相关元素对象,返回的是一个伪数组(HTMLCollection(具备index和length)) var contents=document.getElementByClassName('content') console.log(contents) //获取到的是HTMLCollection,为伪数组 console.log(contents[0]) //获取第一个匹配到的元素
//通过input表单标签的name属性来获取,返回的是一个伪数组(NodeList) <input name='sex'></input> console.log(document.getElementByName('sex'))
//通过标签名来获取,返回的是个伪数组 ( HTMLCollection ) var div=document.getElementsByTagName('div') console.log(div) //( HTMLCollection ) console.log(div[0]) //获取第一个匹配的元素
//根据选择器获取第一个, (id,class,标签,标签名) 返回的是个 element console.log(document.querySelector('p')) //获取标签名为p的标签 console.log(document.querySelector('.box')) //获取class选择器的标签 console.log(document.querySelector('#item')) //获取id选择器的标签 console.log(document.querySeletor('div:nth=child(1)')) //获取div的第一个子元素
//根据对应的选择器获取所有匹配的元素,是个伪数组 console.log(document.querySelectorAll('#box')) console.log(document.querySelectorAll('.content')) console.log(document.querySelectorAll('div')) //NodeList和HTMLCollection的区别: //都是伪数组 //NodeList是以键值对储存
//根节点 console.log(document.getRootNode())
创建 : 创建对应的节点对象
-
document.createElement 创建元素节点
//创建一个元素,传递对应的标签名 var div=document.createElement('div')
//创建一个id属性,默认值为空字符串 var attr=document.createAttribute('id') attr.value='hello world!' console.log(attr) //id='hello world' console.log(typeof attr) //object
//创建文本节点 传递的参数是显示的文本内容 var text=document.createTextNode('hello') console.log(text) //'hello' console.log(typeof text) //object
属性
获取属于文档的相关内容
-
document.body 获取body
-
document.head 获取head
-
document.froms 获取froms ( 返回的是一个HTMLCollection )
...
Element 元素对象 ( * )
方法
获取 : 在元素里面获取元素 , 跟document获取元素的方法一致
element.getElementById()
element.getElementByClassName()
element.getElementByTagName()
element.getElementByName()
element.querySelector()
element.querySelectorAll()
//获取对应的element元素对象 var box=document.getElementById('box') //在box里获取对应的元素 var link=box.getElementByClassName('link')[0] console.log(link) //链式调用 var b=document.getElementById('box').getElementByClassName('link')[0].getElementByTagName('b')[0] console.log(b)
添加 : 在元素里添加元素,或者是添加text 添加到对应的元素中去
追加到末尾
-
append (追加多个,支持传入string和node(字符串会被识别为文本))
-
appendChild (追加一个,只支持node对象)
//获取元素 var box=document.getElementById('box') //创建一个p标签 var p=document.createElement('p') //创建一个文本节点 var text=document.createTextNode('我是文本') //append和appendChild都是添加到末尾 //对于已经添加的元素不能重复添加(重复会以最后一次为准,就是换了个位置) box.append('<p>添加的</p>',p,text) //可添加多个,支持string和node,字符串会被识别为文本 var strong=document.createElement('strong') box.appendChild(strong)
插入到某个子元素之前
-
insertBefore 插入元素到某个子元素之前 ( 参数1写需要传入的元素,参数2写子元素 )
var box=document.getElementsByClassName('box')[0] var link=document.getElementById('link') var age=document.createElement('age') //第一个参数为需要插入的节点,第二个参数为被替换的节点 box.insertBefore(age,link)//把link换成age //插入只针对子元素,孙子元素会报错 var b=document.getElmentsByClassName('box')[0].getElementById('link').getElementByTagName('b')[0] box.insertBefore(age,b) //b为孙子节点,会报错
-
-
insertAdjacentHTML 插入html代码
-
insertAdjacentText 插入文本
// 'beforebegin': 在该元素本身的前面。 // 'afterbegin':只在该元素当中，在该元素第一个子孩子前面。 // 'beforeend':只在该元素当中，在该元素最后一个子孩子后面。 // 'afterend': 在该元素本身的后面。 var box=document.querySeletor('box') var hello=document.createElement('hello') box.insertAdjacentElement('beforebegin',hello) box.insertAdjacentElement('afterbegin',hello) box.insertAdjacentElement('beforeend',hello) box.insertAdjacentElement('afterend',hello) box.insertAdjacentHTML('afterend','<b>我是插入到box后面的html代码</b>') box.insertAdjacentText('afterend','<a>我是插入到box后面的文本,html代码识别不了</a>')
删除方法
-
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 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 节点值
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>
![[spark]transformation算子](https://img-blog.csdnimg.cn/58d837291cf84f8d94f37f4cb13f1077.png)
