dom操作

---

dom操作

1、dom梗概
2、查找
3、修改
4、添加
5、删除

---

一、dom梗概

1.dom是什么

document object model
把对象和html元素做一个 一 一的映射
这样就能在js里面用编程的方式对html里面的元素做处理了

2.哪些操作

查找 修改 添加 删除

二、查找

1、根据id值获取元素

getElementById()
返回符合条件的第一个对象

var obj = document.getElementById("aa")
//如果有很多id叫aa的，只能找到第一个
//所以id尽量让它唯一
console.log(obj)

如果不加处理的话，返回值是none
因为html里面是从上到下加载的，先加载的js
还没有生成要找的元素
解决方法：
1.把 这句话

<script src="javascript基础语法.js" ></script>

移到html元素的下面去
2. 或者这么写

<script src="javascript基础语法.js" defer></script>

另外： deger用于延迟加载时，只在用于外引部分时有效，用于内嵌无效

JavaScript延迟加载

window.onload = function() {
var container = document.getElementById("aa")
console.log(container)
//window.onload是窗口加载完才会执行的事件

obj.onclick = function() {
  console. log("1111111")
}

2、根据class值获取元素

getElementsByClassName()
返回符合条件的所有对象组成的数组

var arr = document. getElementsByClassName("cc")
  console.log(arr)

  arr[0].onclick = function() {
  console.log("1111111")
}

3、根据元素名称获取元素

getElementsByTagName()
返回符合条件的所有对象组成的数组

  var arr = document.getElementsByTagName("div")
  console.log(arr)

4、根据选择器获取元素 querySelector()

就像在css里写法一样
返回符合条件的第一个对象

  var obj = document.querySelector(".cc")
  console.log(obj)

5、根据选择器获取元素 querySelectorAll()

返回符合条件的所有对象组成的数组

  var obj = document.querySelectorAll(".cc")
  console.log(obj)

6、根据关系查找

以上是依据方法
这个是依据对象所具备的属性

var obj = document.getElementById("aa")
console.log(obj)
//以html形式打印
console.dir(obj)
//以对象的形式打印
console.log(obj.nextSibling)
console.log(obj.nextElementSibling)

找父级元素
parentNode
parentElement
找孩子
childNodes（把标签还有文本都包括，，换行的空格也算文本）
children（只包括标签）
第一个孩子
firstChild（只有文本）（第一个孩子 范围是包含文本的）
firstElementChild（只有标签）（第一个孩子 范围是只有文本的）
最后一个孩子
lastChild （只有文本）
lastElementChild（只有标签）
上一个
previousSibling（只有文本）
previousElementSibling（只有标签）
下一个
nextSibling
nextElementSibling

三、修改

先获取值

var obj = document.getElementById("aa")
console.log(obj)
console.dir(obj)

1、改内容

innerText 当前修改的内容当作文本来处理
innerHTML 当前修改的内容当作标签来处理
区别与联系
innerText 直接呈现内容
innerHTML会解析标签，然后再呈现
当里面都是文本时（没有标签的话），两个呈现的一样

value 修改input的值（修改 用于收集用户信息的标签）

obj.innerHTML ="<span>hhhh</span>"
console.log(obj.innerText)
//获取

2、改属性

原生属性 （对象自带的属性） 对象.属性=值

 obj.className = 'blue'

自定义属性
setAttribute(属性名,属性值)设置
getAttribute(属性名)获取

obj.setAttribute("index", "444")
console.log(obj.getAttribute('index'))

3、改样式

obj.style.background = "red"
obj.style.color = 'yellow'
obj.style.fontSize = '50px'

obj.className = 'blue'

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

4、示例（内附需要注意的点）

//有四个class叫aa的div块，点谁谁会消失
var arr =document.getElementsByClassName("aa")
for(var i=0;i<arr.length;i++){
  arr[i].onclick=function(){
    arr[i].computedStyleMap.dispaly='none'
  }
}
//如果怎么写的话，arr[i]会时undefined
//i都是4
//原因：绑定事件和执行事件是两个事件
//绑定了，但是事件不会执行，
//只有被调用了，才会被执行
//0123的时候已经在绑定事件了，当i等于4时，会跳出循环，去执行事件，此时i的值就已经是4了
//所以不能这么写

//用this，谁触发了这个事件，this就代表谁
var arr =document.getElementsByClassName("aa")
for(var i=0;i<arr.length;i++){
  arr[i].onclick=function(){
    this.computedStyleMap.dispaly='none'
  }
}

四、添加

1、创建元素

可以通过创建元素createElement()来创建元素

var newNode = document.createElement("div")
console. log(newNode)
newNode.innerText='新元素'
//追加内容
newNode. className = 'blue'
//追加属性
newNode. setAttribute("index", 'hhhh')
//添加自定义属性
newNode. style.background = 'red'
//添加样式

也可以通过复制元素 cloneNode()来创建元素

参数有两个：true或者是false
true 连内容一起复制
false浅复制,只复制外壳（默认）

var oldNode=document.getElementById("hello")
//先找到这个元素
var newNode = oldNode. cloneNode(true)

2、添加元素到html

var container = document.getElementById(“aa”)
var flag = document.getElementById(“test”)
1,appendChild()在子元素的最后一个位置添加
container. appendChild(newNode)
2,insertBefore(新元素,插入在哪个节点之前)在某个元素前添加
container.insertBefore(newNode, flag)
3,替换节点replaceChild(新元素,要被替换的元素)
container.replaceChild(newNode, flag)

五、删除

想删除一个元素 就去找它的父级元素,父级元素调用removeChild()

//第一种找父级元素的方法：直接找
var container = document.getElementById("aa")
var flag = document.getElementById("test")
//第二种找父级元素的方法：找关系
var container = flag.parentElement

container.removeChild(flag)

总结

dom操作