是W3C为HTML文档提供的一个API（应用程序接口）
API提供了对HTML中的元素、属性、文本的一系列属性、操作的方法，满足动态化文档的需求（让HTML提供接口给JS，让JS去操控HTML）
DOM节点（node）
HTML文档中的文档、标签、属性、文本、注释等都成为node节点(元素节点、属性节点、文本节点)
节点分类
元素节点、属性节点、文本节点
属性节点不是子节点
节点属性
| 节点类型 | node name | node type | node value |
|---|---|---|---|
| 元素节点 | 标签名（大写） | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
获取属性节点：ele.getAttributeNode(id);
获取文本节点：ele.firstChild;
节点查找
DOM 0级查找节点
如果标记存在多个，都是以nodelist类型即伪数组的形式存在，如要对节点进行操作，通过索引具体访问
document.bady
document.images
document.links
document.forms
快速查找节点
从DOM 2级开始新增，若有多个，后面需要跟对应的索引
document.getElementById()，id名
document.getElementsByClassName()，类名 需要加索引
document.getElementsByTagName()，元素名
document.getElementsByName()，表单name属性
document.querySelector()，选择器，获取符合条件的第一个
document.querySelectorAll()，选择器
通过关系查找节点（会找到无用的节点）
parentNode 父节点
firstChild 第一个孩子 拿到的是第一个节点是空文本节点
lastChild 最后一个孩子
childNodes 所有孩子
previousSibling 上一个兄弟 也有空白文本节点
nextSibling 下一个兄弟
只查找有用的元素节点
parentElement 获取父级元素
firstElementChild 获取第一个子级元素
lastElementChild 获取最后一个子级元素
children 获取所有子级元素
previousElementSibling 获取上一个兄弟元素
nextElementSibling 获取下一个兄弟元素
<div id=fa>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
</div>
<script>
// 获取父元素
let father = document.querySelector('.father')
console.log(father);
//获取第一个子元素
let son1 = father.firstElementChild
console.log(son1);
//获取最后一个子元素
let son4 = father.lastElementChild
console.log(son4);
//获取上一个兄弟元素
let son3 = son4.previousElementSibling
console.log(son3);
//获取下一个兄弟元素
let son2 = son1.nextElementSibling
console.log(son2);
//获取所有子级元素
let child = father.children
console.log(child);
//获取父级元素
let fa = father.parentElement
console.log(fa);
</script>操作节点
创建节点
创建元素节点
document.createElement(tag)
创建文本节点
document.createTextNode(content)
创建属性节点
document.createAttribute(attr)
添加节点
parentNode.appendChild(childNode)
将一个新节点作为最后一个子元素添加到指定的父节点
语法
let newNode = document.createElement(`div`);
parentEle.appendChild(newNode);parentNode.insertBefore(newChildNodes,oldChildNodes）
在父节点的某个已有的子节点之前在插入一个子节点
语法
<div id="father">
<p id="p "></p>
</div>
<script>
let newChild = document.createElement("a");//创建新节点
let p = document.getElementById("p");//获取旧节点
father.insertBefore(newChild, p);//把新节点放在旧节点的前面
</script>
删除节点
parentNode.removeChild(childNode)
<div id="father">
<p id="p "></p>
</div>
<script>
father.removeChild(p);//id名是唯一的，就不需要getElement()获取
</script>替换节点
parentNode.replaceChild(newChildNodes,oldChildNodes)
<div id="father">
<p id="son "></p>
</div>
<script>
let newChild = document.createElement("p");//创建新节点
father.replaceChild(newChild,son);//用新创建的节点替换掉旧节点 其中son也是唯一的id，就没有获取
</script>
<div id="father">
<p id="son">1111</p>
</div>
<script>
let newChild = document.createElement("div") // 创建新元素
newChild.innerText = "新的内容";
father.replaceChild(newChild, son); // 替换文本节点操作
ele.innerText
ele.innerHTML
<div id="pEle">
<p>123</p>
</div>
<script>
consloe.log(pEle.innerText);//123
consloe.log(pEle.innerHTML);// <p>123</p>
pEle.innerText = "新的内容";//重新赋值
pEle.innerHTML = "<a href = "#">新的内容</a>;
</script>点击事件
<input type="button" value="click">
<script>
let body = document.body; //获取body
let btn = body.firstElementChild; //获取body的第一个孩子input
//绑定点击事件
btn.onclick = function() {
console.log(1111);//点击一次执行一次
}
console.log(btn);
</script>操作属性节点
以前使用createAttribute()搭配setAttributeNode()为元素添加属性
<div></div>
<script>
let ele = document.querySeletor(`div`); //获取节点
let created = document.createAttribute(`id`); //创建属性节点 id
createld.value = `box`; //为属性赋值
ele.setAttributeNode(createld) //为元素设置属性节点 <div id=`box`></div>
</script>属性操作
访问元素的属性elementNode.attribute访问
如访问a的herf属性：a.herf
更改属性也是直接赋值 a.herf=................
特殊的原生属性
以Class获取元素是byClassName(),所以操作class的属性也是ele.className
获取label获取for属性值，以elementNode.htmlFor获取
自定义属性操作
标签自身已存在的属性是原生属性，class,id等
用data-为前缀来命名
<div id="box" date-inde="1"></div> data-自己命名
box.dateset.index = "0"; //修改元素自定义属性
box.dateset.name = "medicineChest"; //设置自定义属性
//<div date-name="medicineChest"></div>
box.dataset["value"] = "medicineChest"; //方括号访问法方法操作属性
eleNode.getAttribute('attr') 获取属性值
<a href="#" id="link" title="a标签" class="red" date-life="true"></a>
<script>
console.log(link.getAttribute("titile")); //a标签 console.log(link.getAttribute("class")); //red
console.log(link.getAttribute("date-life")); //true
</script>eleNode.setAttribute('attr','value') 设置属性，属性值
<a id="link"></a>
<script>
link.setAttribute("herf","#");
// <a id="link" href="#"></a>
</script>eleNode.removeAttribute('attr') 删除属性
<a id="link" href="#" title="a标签"> </a>
<script>
link.removeAttribute('title');
// <a id="link" href="#"></a>
</script>eleNode.hasAttribute('attr') 查询有没有属性 返回布尔值
<a id="link" href="#" title="a标签"> </a>
<script>
link.hasAttribute('title'); // true
</script>操作元素class列表
ele.classList.add("class1","class2"...)添加类
ele.classList.remove("class1","class2"...)删除类，如不存在，不报错
ele.classList.contains("className")是否存在类，返回布尔值
ele.classList.toggle("className")切换类，有就取消，没有就增加
property和attribute属性 attribute 与 property 的区别 · 语雀
property：对象的属性
attribute: HTML标签的属性，值是字符串类型
操作内嵌样式
elementNode.style
设置、获取内嵌的样式
<div id="box" </div>
<script>
box.style.height = "100px" //设置属性
box.style.backgroundColor = "red"; //驼峰命名
console.log(box.style.height); //100px
</script>elementNode.style.cssText
属性名不需要驼峰，类似Css
<div id="box" </div>
<script>
box.style.cssText = "
height = "100px;
backgroundColor = "red";
";
</script>Obiect.assign(target,sources)目标，来源
写法属于对象的键值对
<div id="box" </div>
<script>
Obiect.assign(box.style,{
height :"100px,
backgroundColor :"red";
});
;
</script>
Obiect.assign(div.style，box.style);//把box的样式给div获取最终样式
window.getComputedStyle(ele).attr 现代浏览器 获取元素的某个属性
window.currentStyle.attr 低版本IE
window.getComputedStyle(ele).attrconsole.log(window.getComputedStyle(box).height);//window.可以省略获取元素实际尺寸
| 属性 | 描述 |
|---|---|
| ele.clientWidth,ele.clientHight | 返回元素的content+padding的值 |
| ele.offsetWidth,ele.offsetHight | 返回元素的content+padding+border的值 |
获取元素位置
| 属性 | 描述 |
|---|---|
| ele.offsetLeft,ele.offsetTop | 相对于包含它的右非静态定位属性的元素的0 0点的距离（类似于absolute） |
children 和 selectorAll 的差别
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
