Javascript(基础) 笔记16
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="123
"
// 把修改的内容当成文本修改（即：该标签不能识别到<>内的属性）
o.innerHTML="123
"
// 把修改的内容当成标签修改（即：该标签能够识别<>内的属性并作出修改）
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三、 添加(创建元素+添加元素)
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)// 第二种父级删除表达