全称:document object model(文档+对象+模型)
查找
1.getElementById()
根据ID值获取元素,返回符合条件的第一个对象
var obj = document.getElementById("aa")
console.log(obj)
console.dir(obj)
obj.style.background = "red"
obj.onclick = function(){
alert("a")
}
2.getElementsByClassName()
根据class值获取元素,返回所有符合条件的对象组成的数组
var arr = document.getElementsByClassName("aa")
console.log(arr)
arr[0].style.background = "red"
arr[0].style.color = "yellow"
arr[0].onclick = function(){
alert("1")
}
3.getElementsByTagName()
根据元素名称获取元素,返回所有符合条件的对象组成的数组
var arr = document.getElementsByTagName("div")
console.log(arr)
console.log(arr.length)//获取数组长度
4.querySelector()
根据选择器获取元素,返回符合条件的第一个对象
var obj = document.querySelector(".aa")
console.log(obj)
5.querySelectorAll()
根据选择器获取元素,返回所有符合条件的对象组成的数组
var arr = document.querySelectorAll(".aa")
console.log(arr)
6.通过关系查找
var obj = document.querySelector(".aa")
找父亲
console.log(obj.parentElement)
console.log(obj.parentNode)
找孩子
console.log(obj.children)
console.log(obj.childNodes)
找第一个孩子/元素
console.log(obj.firstChild)//firstElementChild
找最后一个孩子/元素
console.log(obj.lastChild)///lastElementChild
找上一个孩子/元素
console.log(obj.previousSibling)
console.log(obj.previousElementSibling)
找下一个孩子/元素
console.log(obj.nextSibling)
console.log(obj.nextElementSibling)
修改
修改内容
var obj = document.querySelector(".aa")
console.log(obj)
obj.innerHTML = "新内容"
obj.innerText = "新内容11"
差别:innerHTML把修改的内容当作标签处理,比如如果修改的内容为h1>新内容h1>,则innerHTML呈现出来的就是h1形态的“新内容”,而innerText呈现出的内容与平常文字无差别
修改input框内的值
obj.value = "aaaa"
获取内容
console.log(obj.innerHTML)
修改属性
原生属性
对象.属性=值
查找属性
console.log(obj.className)
修改属性
obj.id = "demo"
自定义属性
setAttribute()设置,getAttribute()获取
obj.setAttribute("hello","helloword")
console.log(obj.getAttribute("hello"))
修改样式
对象. style.属性 = 值
obj.style.background="red"
obj.style.color="yellow"
obj.style.fontSize ="80px"
对象.style.cssText
obj.style.cssText = "background:red;color:yellow;font-size:80px"
修改属性,结合CSS达到修改样式的目的
style>
.aa{
background-color: red;
color: yellow;
font-size: 80px;
}
style>
obj.className = 'aa'
添加
1.创建元素
①创建元素creatElement()
var newNode = document.createElement("h1")
console.log(newNode)
newNode.innerHTML ="新添加的元素"
newNode.className = "ccc"
newNode.style.background = "yellow"
②复制元素
flase 浅复制,只复制外壳 true复制全部
var oldNode = document.querySelector("h1")
var newNode = oldNode.cloneNode(true)
console.log(newNode)
2.添加元素
①appendChild( 在子元素最后位置添加)
②insertBefor(要插入的元素,插入在哪个结点之前) 在某个子元素前添加
③replaceChile(要插入的元素,要被替换的元素) 替换掉元素
var container = document.querySelector(".aa")
console.log(container)
container.appendChild(newNode)
删除
removeChild(要删除的元素)
var container = document.querySelector(".aa")
var h2 = document.querySelector("h2")
container.removeChild(h2)
h2.parentNode.removeChild(h2)