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="<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)// 第二种父级删除表达