DOM的概述
DOM(document object model)文档对象模型,顾名思义他就是用于操作对应的文档的,也就是操作你写的html文档。DOM是一个遵从文档流的语句。所以他是同步机制。
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);
-
document.getElementsByClassName 通过className获取 (HTMLCollection)
//通过对应的class获取相关元素对象数组 (HTMLCollection (伪数组 具备下标 具备length)) var contents = document.getElementsByClassName('content') console.log(contents);//获取HTMLCollection console.log(contents[0]);//获取第一个匹配的元素
-
document.getElementsByTagName 通过标签名获取(HTMLCollection)
//通过标签名获取对应的元素对象数组 var div = document.getElementsByTagName('div') console.log(div);//HTMLCollection console.log(div[0]);//获取第一个匹配的元素
-
document.getElementsByName 通过name属性获取 (NodeList)
//根据name属性名来获取对应的元素(表单标签)NodeList console.log( document.getElementsByName('sex'));
-
document.querySelector 通过选择器获取第一个 (Element)
//根据对应的选择器获取 id # class . 标签 标签名 返回的都是元素对象 //querySeletor 获取匹配选择器的第一个元素 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.querySelectorAll('#box')); console.log(document.querySelectorAll('.content')); console.log(document.querySelectorAll('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);//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.body 获取body
document.body
-
document.head 获取head
document.head
-
document.froms 获取froms (返回一个HTMLCollection)
document.froms
...
Element 元素对象(*)
方法
获取的方法(在元素里面获取元素)(跟对应的document的获取元素方法一致)
//获取对应的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] console.log(b);
添加的方法 (在元素里面添加元素 或者是添加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)//添加一个 var strong = document.createElement('strong') box.appendChild(strong)//添加一个
插入到某个子元素之前
-
insertBefore 插入元素到某个子元素之前 (参数1需要传入的元素、参数2子元素)
-
insertAdjacentElement 插入element
-
insertAdjacentHTML 插入HTML代码
-
insertAdjacentText 插入文本
删除方法
-
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)
属性
基础属性
-
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)
相关获取元素内属性节点集合的属性(只读属性)
-
attributes
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>