DOM

获取DOM元素

document.getElementById(’’)
document.getElementsByClassName(’’)
document.getElementsByTagName(’’)

querySelector只能取到第0个满足选择器的元素
document.querySelector(’‘’）

把所有满足选择器的元素全部取到
document.querySelectorAll(’’)
后代、子代选择器都可以在这里直接写
document.querySelector(‘div p’)

元素属性

XX.getAttribute（’’）来获取自定义属性
XX.removeAttribute(‘index’)来删除自定义属性，属性名和属性值都没了

百度一下

js里实现点击页面跳转

百度

id 和class的操作

添加一个class div.classList.add(‘ac’)
移除一个class div.classList.remove(‘ac’)
如果要移除多个，分两次写
覆盖原来的class div.className = ‘box2’

innerHTML

div.innerHTML = ‘box2’
div.innerHTML = ‘box3’ 会解析标签
div.innerText = ‘box3’ 不会解析标签

节点

元素都有一个children属性：获取当前元素的子元素
console.log(div.children)
childNodes获取的是子节点:注释,文本,标签全部都叫节点
console.log(div.childNodes)
我们可以获取某个节点以后通过nodeName属性来判断节点类型

如果我们确切的直到这个是一个标签节点,还可以使用tagName直接获取标签名
console.log(div.tagName)

元素操作

1.创建元素
document.createElement(‘div’)
appendChild方法来往body的结束去追加box作为body的最后一个子元素
document.body.appendChild(box)
如果反复append同一个box,那么最终也会只有一个。

 先克隆(复制),再append。克隆分为深克隆和浅克隆,浅克隆只克隆元素本身,不会克隆子元素和内容,默认是浅克隆
                   var box1 = box.cloneNode()
                  document.body.appendChild(box1)
       cloneNode方法有一个参数,默认值是false,代表浅克隆,true代表深克隆,就会连着内容一起克隆。
                    注意点:如果元素有id属性,最好不要直接克隆,否则会出现两个id相同的元素

2.插入元素
ul.insertBefore(li, ac) // 把li放在ul里面,.ac前面
3.替换元素
ul.replaceChild(li, ac) //把ul里面的ac替换成li
4.删除元素
about.remove() //把自己删除，但是IE8以下不能用
ul.removeChild(ac) //删除ul的子元素ac
ac.parentNode.removeChild(ac) //不知道父级是谁的时候
5.查找节点
在DOM树里，可以从一个元素出发找到其他任意一个元素，不常用。

console.log(ul.previousElementSibling) //从ul出发找上一个兄弟元素
ul.firstElementChild ul.lastElementChild //找ul的第一个和最后一个子元素

文档碎片

在ul里创建10 个li可以用这两种方法
1、这种写法创建10个li，append 10次，进行了10次DOM操作
for (var i = 0; i < 10; i++) {
var li = document.createElement(‘li’)
li.innerHTML = i+1
ul.appendChild(li)
}

2、可以用一个文档碎片先把10个li放入碎片里，然后只需要一次把碎片插入ul就行了，这样就只有一次DOM操作了。这种写法虽然看起来更麻烦，但是减少了DOM操作的次数，性能更优
var cache = document.createDocumentFragment()
for (var i = 0; i < 10; i++) {
var li = document.createElement(‘li’)
li.innerHTML = i+1

          // 这里的append是在计算机里操作的，不是在页面上操作的
                   cache.appendChild(li)
            }
          // 当for结束以后把cache插入到ul里
     ul.appendChild(cache)

返回顶部

天王盖地虎，小鸡炖蘑菇

天王盖地虎，小鸡炖蘑菇

天王盖地虎，小鸡炖蘑菇

天王盖地虎，小鸡炖蘑菇

天王盖地虎，小鸡炖蘑菇

点这里，缓慢返回顶部