DOM 操作

下面用的代码

<div id="box" data_a_b="ccc">
    <ul class="banner">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="number">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="navBar">
    <ul class="nav">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="content">
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div id='text'></div>
<script>
    var box = document.getElementById('box')
    var content = document.getElementById('contet')
    var banner = document.getElementsByClassName('banner')
    var li = document.getElementsByTagName('li')
    var list = document.getElementsByClassName('list')
    var navBar = document.getElementById('navBar')
    var nav = document.getElementsByClassName('nav')

    //childNodes 所有子元素
    var boxChildNodes = box.childNodes

    //children 所有子元素
    var boxChildren = box.children

    //Array.prototype.slice() 将伪数组变成数组
    var array = Array.prototype.slice.call(boxChildren,0)

    //用遍历将伪数组变成数组
    var aaa = []
    for(var i = 0; i < boxChildNodes.length; i++){
        aaa.push(boxChildNodes[i])
    }

    //parentNode 父元素
    if(banner[0].parentNode === box){
        console.log('true')
    }else{
        console.log('false')
    }

    //previousSibling 上一个兄弟元素
    var previous = boxChildNodes[0].previousSibling

    //nextSibling 下一个兄弟元素
    var next = boxChildNodes[4].nextSibling

    //firstChild 第一个子元素
    if(boxChildNodes[0] === box.firstChild){
        console.log('true')
    }

    //lastChild 最后一个子元素
    if(boxChildNodes[boxChildNodes.length-1] === box.lastChild){
        console.log('true')
    }

    //hasChildNodes() 是否有子元素
    var boxHasChildNodes = box.hasChildNodes()
    var liHasChildNodes = li[0].hasChildNodes()

    //ownerDocument 根元素
    var boxOwner = box.ownerDocument

    //appendChild() 插入子元素
    boxChildNodes[1].childNodes[1].appendChild(list[0]) //在 banner 下第一个 li 下最后一个元素后添加 list
    boxChildNodes[1].appendChild(list[0]) //在 banner 下最后一个元素后添加 list
    boxChildren[1].appendChild(list[0]) //在 number 下最后一个元素后添加 List
    box.appendChild(list[0]) //在 box 下最后一个元素后添加 list

    //insertBefore() 在指定元素前插入某元素
    box.insertBefore(list[0],null) //在 box 下最后一个元素后添加 list 和 appendChild() 方法相同
    box.insertBefore(list[0],banner[0]) //在 box 下 banner 前添加 list
    boxChildNodes[1].insertBefore(list[0],banner[0].children[0]) //在 banner 下第一个 li 前添加 list
    navBar.childNodes[1].insertBefore(list[0],nav[0].children[2]) //在 nav 下第三个 li 前添加 list

    //replaceChild() 替换子元素
    box.replaceChild(list[0],banner[0]) // 把 banner 替换成 list
    boxChildNodes[1].replaceChild(list[0],banner[0].childNodes[1]) //把 banner 下第一个 li 替换成 list

    //removeChild() 移除节点
    box.removeChild(banner[0]) //把 banner 移除掉
    boxChildNodes[1].removeChild(banner[0].children[0]) //把 banner 下第一个 li 移除掉
    
    //getAttribute() 获取属性
    if(box.getAttribute('id') === box.id){
      console.log('true')
    }
    
    //setAttribute() 设置属性
    box.id = 'xxx' 和 box.setAttribute('id','xxx') 效果一样
    
    //createElement() 创建一个元素标签
    var p = document.createElement('p')
    banner[0].insertBefore(p,banner[0].children[1])
    
    //createTextNode() 创建文本
    var hello = document.createTextNode('Hello')
    var text= document.getElementById('text')
    text.appendChild(hello)
    
    //normalize() 合并文本节点
    text.normalize()
    
    //splitText()
    text.childNode[0].splitText(5)
</script>

Node

  1. childNodes获取到的是父元素下所有的一级子元素,是一个类似数组的对象,例如:boxChildNodes结果是:[ 0:text , 1:ul.banner , 2:text , 3:ul.number , 4:text, length:5],它会获取到元素和元素之间的空隙(文本),如上面所示的0,2,4。使用Array.prototype.slice(childNode,0)方法,可将伪数组变成数组,或者用遍历的方法也可以将它变成数组。
  2. childrenchildNodes类似,区别是它不会获取到文本和文本之间的空隙(文本)。
  3. parentNode可以获取子元素的上一级(父元素)。
  4. previousSiblingnextSibling获取上一个或下一个兄弟元素。
  5. firstChildlastChild获取父元素下第一个或最后一个子元素(包括空隙,也就是文本)。
  6. boxChildNodes的第一个子节点是boxChildNodes[0] === box.firstChildboxChildNodes[boxChildNodes.length-1] === box.lastChild
  7. hasChildNodes()可以查询父元素下面是否有子元素(1个或多个),有返回true,没有返回false,要注意:文本节点也是节点。
  8. ownerDocument 查询一个元素的根元素。
  9. appendChild(newNode,oldNode)在父元素上最后一个元素后面添加新的子元素,无法指定添加到某个元素前后。
  10. insertBefore(newNode,oldNode)在父元素下某个子元素前添加新的子元素,如果父元素下的某个子元素找不到,则在父元素下最后一个子元素后添加新的子元素和appendChild()方法一样。
  11. removeChild(oldNode)移除父元素下的某节点

Document

<!doctype html>
<html>
    <head>
        <title>xx</title>
    <head>
    <body>
        <script>
            var html = document.documentElement
        </script>
    </body>
</html>
  1. document.documentElement 获得html元素
  2. document.body获得body元素
  3. document.head获得head元素
  4. document.doctype获得doctype的引用
  5. document.title获得title内容
  6. document.anchors获得所有带namea标签
  7. document.forms获得所有form标签
  8. document.links获得所有带href的标签

Element

  1. nodeTyp===1为标签,nodeType===3为文本。
  2. nodeNametagName都是返回元素的标签名,返回的都是大写,用的时候需要进行大小写转换。
  3. getAttribute()setAttribute()removeAttribute()获取,设置和删除元素的属性,和直接使用box.id效果一样,区别是get...这类方法是能获取自定义属性的。
  4. 自定义属性可以通过dataset访问
  5. createElement()createTextNode()创建元素标签和创建文本,需要用appendChild()添加到页面中去。
  6. normalize()splitText()合并文本节点(在父元素上操作)和分割文本节点(在子元素上操作)

<div class="nav">
    <ul class="leftNav">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="rightNav">
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var ulId = document.getElementById('leftNav')


    //querySelector() 返回找到匹配的第一元素
    var ul = document.querySelector('ul li')
    
    // querySelectorAll() 返回找到匹配的所有元素
    var ulAll = document.querySelectorAll('ul li')

    //matches() 检测该元素与选择符是否匹配
    ulId.matches('.leftNav')
</script>

DOM Selector

  1. querySelector()querySelectorAll()返回找到匹配的第一元素和返回找到匹配的所有元素。
  2. matches() 检测该元素与选择符是否匹配
  3. div.classList.remove('user')删除classdiv.classList.add('current')添加classdiv.classList.toggle('user')如果有这个class就删除,没有就添加。

删除或添加class另一种比较复杂的方法

<div id="xx" class="bd user disabled"></div>

var div = document.getElementById('xx')
var className = div.className.split(/\s/g)
var pos = -1
for(var i = 0; i <className.length; i++){
    if(className[i] === 'user'){
        pos = i
        break;
    }
}
console.log(pos)
className.splice(i,1,'dddddd')
div.className = className.join(' ')

相关推荐