JavaScript中的DOM对象
文章目录
- 前言
- 一、DOM是什么？
- 二、获取元素节点的方法
- 1.获取body和head节点
- 2.通过ID获取元素节点
- 3.通过class获取元素节点
- 4.通过name属性获取元素节点
- 5.通过标签名获取元素节点
- 6.通过css选择器获取元素节点
- 三、操作元素的属性
- 四、操作元素的样式属性
- 五、节点操作
- 六、节点的属性
- 六、其他
前言
提示：DOM
DOM树理解。
一、DOM是什么？
示例：DOM（document object model）文档对象模型。当页面被加载的时候，浏览器会创建页面的DOM
D：文档 - DOM将HTML页面解析为一个文档 —> document对象
O：对象 - DOM将HTML页面中内容解析为对应的对象
M：模型 - DOM中对象之间的关系(节点树结构)
作用：动态操作html元素节点(写特效)和节点(element)的样式操作（增删改查）
二、获取元素节点的方法
1.获取body和head节点
代码如下（示例）：
1. document.body //返回值是节点的本身,当前某个节点对象
2. document.head //返回值是节点的本身,当前某个节点对象
2.通过ID获取元素节点
代码如下（示例）：
id一旦被生成，有且只有一个，初始的第一个ID元素。
3.通过class获取元素节点
代码如下（示例）：
返回的是元素数组的集合，伪数组(没有API可操作)
4.通过name属性获取元素节点
代码如下（示例）：
返回的是节点数组的集合，伪数组
5.通过标签名获取元素节点
代码如下（示例）：
22222
返回的是元素数组的集合，伪数组(没有API可操作)
6.通过CSS选择器获取元素节点
代码如下（示例）：
22222
3333
4444
1. querySelector();//有且只匹配一个元素
2. querySelectorAll();//匹配所有选择器
三、操作元素的属性（html）
1、设置元素属性
例如：
var ele = document.getElementById("img")；
ele.属性 = "值"
或者ele.setAtrribute(属性，"值")
2、获取元素属性
ele.属性
或者ele.getAtrribute(属性)
3、删除元素属性
ele.属性 = " "
或者ele.removeAtrribute(属性)
四、操作元素的样式属性（css样式）
本质：操作style样式属性
1.设置样式
ele.style.css样式属性 = "值"
2.获取样式
ele.style.css属性
五、节点操作
1、创建元素节点：document.createElement(tagName)
2、创建文本节点：document.createTextNode="str"
3、追加子节点：parent.appendChild(ele)
4、追加子节点：parent.insertBefore(a,b)
5、删除子节点：parent.removeChild(ele)
6、删除自身节点：ele.remove( )
7、替换节点：parent.replaceChild(a,b)
8、复制节点：ele.cloneNode("true|false")
六、节点的属性
1、节点名称：ele.nodeName
2、节点的值：ele.nodeValue
3、节点的类型：ele.nodeType
4、获取元素所有的子节点：parent.children
5、获取当前元素的下一个兄弟元素：ele.nextSibling
6、获取当前元素的上一个兄弟元素：ele.previousSibling
7、获取某个元素的第一个子元素：parent.firstChild
8、获取某个元素的第一个子元素：parent.lastChild
link
111111
5555555555555555555555555555555555555555555555.
//节点
var div = document.getElementByTagName("div")[0];
console.log(div.childNodes);
console.log(div.children);
var b =document.getElementById("b1")
console.log(b.parentNode);//获取父节点
console.log(b.nextElementSibling);//兄弟节点
console.log(b.previousElementSibling);//兄弟节点
//新增节点
var img =document.createElement("img");
img.src = "src"
div.insertBefore(img,b);
console.log(b.NodeName);
console.log(b.NodeType);
//替换节点
div.repleceChild(img,b);
七、其他
1.设置元素的内容：innerText="值" ------------------只能设置纯文本，对双标签才有用
2.设置元素的内容：innerHTML="值"--------------------不仅可以设置文本，支持html标签解析
3.元素属性添加：ele.id;ele.calssName..........
总结
DOM作用：通过js动态操作元素（动态元素的属性；动态元素的样式；节点操作（文档的标签））