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
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(' ')
相关推荐
zrtlin 2020-11-09
xuebingnan 2020-11-05
wikiwater 2020-10-27
heheeheh 2020-10-19
Crazyshark 2020-09-15
softwear 2020-08-21
ZGCdemo 2020-08-16
jczwilliam 2020-08-16
littleFatty 2020-08-16
idning 2020-08-03
jinxiutong 2020-07-26
lanzhusiyu 2020-07-19
Skyline 2020-07-04
xiaofanguan 2020-06-25
Aveiox 2020-06-23
dragonzht 2020-06-17