DOM 操作

2018-11-07 本文已影响0人 astak3

下面用的代码

<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

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

Document

<!doctype html>
<html>
    <head>
        <title>xx</title>
    <head>
    <body>
        <script>
            var html = document.documentElement
        </script>
    </body>
</html>

document.documentElement 获得html元素
document.body获得body元素
document.head获得head元素
document.doctype获得doctype的引用
document.title获得title内容
document.anchors获得所有带name的a标签
document.forms获得所有form标签
document.links获得所有带href的标签

Element

nodeTyp===1为标签，nodeType===3为文本。
nodeName和tagName都是返回元素的标签名，返回的都是大写，用的时候需要进行大小写转换。
getAttribute()，setAttribute()，removeAttribute()获取，设置和删除元素的属性，和直接使用box.id效果一样，区别是get...这类方法是能获取自定义属性的。
自定义属性可以通过dataset访问
createElement()和createTextNode()创建元素标签和创建文本，需要用appendChild()添加到页面中去。
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

querySelector()和querySelectorAll()返回找到匹配的第一元素和返回找到匹配的所有元素。
matches() 检测该元素与选择符是否匹配
div.classList.remove('user')删除class，div.classList.add('current')添加class，div.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(' ')

DOM 操作

Node

Document

Element

DOM Selector

猜你喜欢

热点阅读