dom 操作
①document ②object ③model
一、 查找
1. getElementById() 根据id值获取元素,返回符合的第一个元素(只会返回第一个)
var x=document.getElementById("a");
console.log(x);
console.dir(x); // 以对象形式打印
x.style.background="red";
x.style.color="yellow";
x.onclick=function(){
alert('不要点击');
}
2. getElementsByClassName() 根据class值来获取元素,返回所有符合条件的对象所组成的数组
var y=document.getElementsByClassName("aa")
console.log(y)
// 找不到时则返回一个空数组
// y.style.background="red"; 由于是数组,所以并不适用这种表达,需要具体到数组中的某个元素
y[2].style.background="red";
3. getElementsByTagName() 根据元素名称获取元素,返回符合元素组成的数组
var z=document.getElementsByTagName("p")
console.log(z)
4.根据选择器选取元素
var obj=document.querySelector(".aa") // 返回符合的第一个元素
console.log(obj)
5.
var obb=document.querySelectorAll(".aa") // 返回符合元素组成元素的数组
console.log(obb)
通过关系查找
var s=document.querySelector(".aa")
// 找父亲: .parentNode .parentElement
// 找孩子: .childNodes .children
// 找第一个孩子: .firstChild .firstElementChild
// 找最后一个孩子: .lastChild .lastElementChild
// 找上一个元素: .previousSibling .previousElementSibling
// 找下一个元素: .nextSibling .nextElementSibling
console.log(s.childNodes)
//但是打印出来会有"text",即空格、文本等默认为text
二、 修改(修改内容、属性、样式)
1.修改内容
var o=document.querySelector(".a")
o.innerText="<h1>123</h1>"
// 把修改的内容当成文本修改(即:该标签不能识别到<>内的属性)
o.innerHTML="<h1>123</h1>"
// 把修改的内容当成标签修改(即:该标签能够识别<>内的属性并作出修改)
o.value="aaaaa" // 修改input内的值
2.修改属性
// 原生属性 对象.属性=值
o.id="ss"
// 自定义属性
// 设置 setAttribute("自定义属性名","自定义属性值")
// 获取 getAnimations()
var s=document.querySelector('.a')
s.setAttribute('ss','sbb2')
console.log(s.getAttribute('ss'))
// 获取setAttribute设置的标签,则只能通过getAttribute标签来提取
3.修改样式
o.style.background="blue"
o.style.fontSize="80px"
// 【注:单独书写时需要注意‘-’的删除和次首字母大写等问题】
o.style.cssText = "background:yellow; color:pink; font-size:80px;"
// "一劳永逸"型样式改写
e.g.
var obj=document.querySelector(".a")
obj.style.cssText = "background:yellow; color:pink; font-size:80px; height:100vh;"
obj.onclick=function(){
var bj=""
for(var i=0;i<6;i++ ){
bj+=Math.round(Math.random()*9)
}
console.log(bj)
obj.style.background="#"+bj
}
// 一个点击随机修改背景的小例子
var arr=document.querySelectorAll('li')
console.log(arr)
for(var i=0;i<arr.length;i++){
arr[i].onclick=function(){
// this.style.background="red"
var bj=""
for(var i=0;i<6;i++ ){
bj+=Math.round(Math.random()*9)
}
console.log(bj)
this.style.background="#"+bj
// 【注:在此用arr[i]并不能触发效果,要用this来,才能实现循环】
}
}
三、 添加(创建元素+添加元素)
1.创建
① 创建元素
var newNode = document.createElement('h1') // 创建一个元素类型
newNode.innerText='添加的内容'
// 只输入文本而无<>部分的话,newNode.innerHTML='添加的内容'等同于如上表达
console.log(newNode)
newNode.className='nn'
newNode.style.background="red"
newNode.style.color='pink' // 添加一些样式
②复制元素 cloneNode(true/false)
【true时为深复制(复制所有), false时为浅复制(只复制外壳)】
var h=document.querySelector('p')
var newNode=h.cloneNode(false)
console.log(newNode)
2.添加
① appendChild() 默认添加到父级元素空间内的末尾
②insertBefore(插入元素,位置) 将'插入元素'插入到'位置'之前
③replaceChild(替换元素,去除元素) 用'替换元素'取代'去除元素'
var c=document.querySelector('.tt')
console.log(c)
c.appendChild(newNode) // 默认添加到最后
var h=document.querySelector('p')
c.insertBefore(newNode, h)
c.replaceChild(newNode,h)
四、 删除
父级.removeChild(元素)
var c = document.querySelector(".tt")
var h = document.querySelector("h2")
c.removeChild(h) // 第一种表达
h.parentNode.removeChild(h)// 第二种父级删除表达