下面用的代码
<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(' ')
网友评论