JavaScript,dom操作

document object model 把java的对象和html的元素做一一对应

查找

方法一：

var obj = document.getElementById("aa") 根据id值获取元素，返回符合条件的第一个对象

var obj = document.getElementById("aa")

console.log(obj)

console.dir(obj)

方法二：

document.getElementsByClassName("aa") 根据class值获取元素 返回所有符合条件的对象组成的数组

数组没有style，需要通过下标加样式

arr[0].style.background = "red"

方法三：

document.getElementsByTagName("div")根据元素名称获取元素，返回所有符合条件的对象组成的数组

方法四：

document.querySelector("ul li:hover") 根据选择器获取元素,返回符合条件的第一个对象

方法五：

document.querySelectorAll(".aa") 根据选择器获取元素,返回符合条件的所有对象

方法六：

通过关系查找

var obj = document.querySelector(".aa")

找父亲 parentNode parentElement

找孩子 childNodes children

第一个孩子 firstChild firstElementChild

最后一个孩子 lastChild lastElementChild

找上一个元素 previousSibling previousElementSibling

下一个元素 nextSibling nextElementSibling

console.log(obj.firtsChild)

修改

1.修改内容

obj.innerHTML = "新内容"

obj.innerText = "新内容"

写入文本时无差别，但写入标签时HTML可以解析 obj.innerHTML = "新内容"

obj.value = "aa" value修改input里的值

2.修改属性

原生属性 对象.属性 = 值

console.log(obj.className)

obj.id = "demo"

自定义属性 setAttribute设置

obj.setAttribute("hello","helloWorld")

console.log(obj.getAttribute("abcsajd")

3.修改样式

1.对象.style.属性 = 值

obj.style.background = "red"

2.对象.style.cssText = “ ” （沿用css写法）

obj.style.cssText = "background:red;color:yellow;font-size:60px"

3.通过修改属性，结合css达到修改样式的目的

obj.className = "red"

添加

1.创建元素

创建元素 createElement()

复制元素 false浅复制，只复制外壳 true复制全部

var newNode = document.createElement("h1")

console.log(newNode)

newNode.innerHTML = "新添加的元素"

newNode.className = 'ccc'

newNode.style.background = "yellow"

2.添加元素

appendChild(要插入的元素) 在子元素最后位置添加

insertBefore(要插入的元素，插入在哪个节点之前) 在某个子元素前添加

replcaeChild(要擦汇入的元素，要被替换的元素) 替换掉元素

删除

父级元素调用删除的方法 removeChild(要删除的元素)

var container = document.querySelector(".aa")

var h2 = document.querySelector("h2")

container.removeChild(h2)

h2.parentNode.removeChild(h2)