javascript的dom操作

全称：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)