DOM操作：

document object model（文档对象模型）

作用：动态操作html元素节点（写特效）

操作html元素节点（element）：

节点的样式操作：

增

删

改

查：

获取当前需要操作的元素节点：

Dom tree（dom树）：root element（html）

document（当前文档的根节点)

document.getElementById():通过id 属性获取元素
document.getElementByClassName//通过class属性，获取元素
document.getElementsByName():[]//通过name属性，获取元素
document.getElementsByTagName():[]//通过标签名，获取元素
document.querySlector(selector):通过选择器来匹配元素
docu.querySlectorAll(selector):批量匹配

操作元素的属性（html）

设置属性：

ele.属性 = "值"
ele.setAtrribute(属性，"值")

获取属性：

ele.属性
ele.getAtrribute(属性)

删除属性：

ele.removeAtrribute(属性)
ele.属性= ""

//当前文档对象（从根出发）
conlose.log(document.)

//获取body    head
console.log(document.body)//返回某个节点对象
console.log(document.head)//返回头部节点对象
​

//获取元素节点
//通过id获取元素节点（id有且只有一个,初始的第一个id元素）
var div = document.getElementById("div[id值]")
console.log(div)

//通过class属性 获取元素
var elmentList = document.getElementsByClassName("item")
console.log(elmentList)
console.log(elmentList[0])//可以用数组的方式取值，但是不能用数组的api来操作他

//通过name属性来获取元素
var formEles = document.getElemnetsByName("username")//找一个name
//需要以数组的方式提取
​
var radio = document.getElementsByName("six")//复选框找多个name

//通过标签名来获取元素
var tagEles = document.getElementsByTagName("div")
console.log(tagEles)

//通过css选择器(selector)的方式来获取元素
//querySelector 有且只匹配一个元素
css：{
    #box{
    
}
}
var divEles = document.querySelector("#box");//id选择器以#开头
console.log(divEles)
var classDiv = document.querySelector(".container")
console.log(classDiv)
//选择器 匹配多元素 querySelector
var classDiv = document.querySelectorAll(".container")//可匹配所有class名为container的元素//以数组的形式
console.log(classDiv)
​
var divList = document.querySelectorAll(".father>div:nth-child(2)");
console.log(divList)

js动态操作元素属性

设置属性的值：ele.属性 = “值”

获取属性的值：ele.属性

var imgEle = doucment.getElementsByTagName("img")[0];
//动态设置路径
imgEle.src = "xxx/xxx/xx.xxx"
//动态赋值//设置属性值
imgEle.width = 500;
imgEle.height = 500;
imgEle.alt = "文本显示"
imgEle.title = "文本显示"
​
cinsole.log(imgEle)

//原生js操作dom

//获取元素的css样式属性

var div = documentsByClassName("box")[0];
ele.style.css样式属性 = “值”；
​

获取样式

ele.style.css样式//只能获取style中的属性中，不能获取css选择器中属性

给元素增加属性：

ele.className = "name"
ele.id = "value"
ele.dataItem  = "xxx"

如何获取一个节点中的“内容”

var div = document.getElementById("div");
var text = div.innerText;//获取一个元素中的纯文本内容
var html = div.innerHTML;//获取元素中的内容，包括标签

设置一个节点中的内容：

//设置内容：原标签中所有的内容会被覆盖
var div2 = document.querySelector("#div2");
div2.innerHTML = "<span style='color:red'>123456</span>"
div2.innerText = "<span style='color:red'>123456</span>"

元素节点的属性：

节点操作

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()

8、复制节点：ele.cloneNode(true|false);给true会复制当前节点下的所有节点；给flase只复制当前节点

节点属性

1、ele.nodeName:节点名称（DIV）
2、ele.nodeValue:节点的值
3、ele.nodeType:节点类型
4、parent.children:获取元素所有的子节点
5、ele.parentNode:获取元素的父节点
6、ele.nextSibling:获取元素的下一个兄弟元素
7、ele.previousSibling:获取元素的上一个兄弟节点
8、parent.firstChild:获取某元素的第一个子元素
9、parent.firstChild:获取某元素的最后一个节点

其他

1、设置元素的内容：ele.innerText = "值"；
2、设置元素的内容：ele.innerHTML = "值";
3、元素属性添加：ele.id
4、元素属性添加：ele.className

dome8 day08复盘

增

//createElemen()
//创建一个div标签
var div = documents.createElement("div")
var p = document.createElement("p");
//var text = document.createTextNode("xxxx");//文本节点 string
​
p.innerText = text
//给元素追加子节点

创建元素节点

document.createElement(tagName)//返回值是节点对象（空标签）
document.createTextNode = "vaule"//创建一个字符串（string）
ele.cloneNode(ele);//复制一个节点     节点对象
ele.appendChild(ele);//追加子节点