DOM及其基础操作
DOM:document obiect model 文档对象模型,提供一些属性和方法供我们操作页面中的元素
// 获取DOM元素的方法
// 通过元素id获取元素 指定在文档中,基于元素的Id或者这个元素对象
document.getElementById()
// 在指定上下文(容器)中,通过标签名获取一组元素
[context].getElementsByTagName()
// 在指定上下文中,通过样式类名获取一组元素的集合(不兼容IE6~8)
[context].getElementsByClassName()
// 在整个文档中,通过标签的name属性值获取一组节点集合
// (在IE中只有表单元素的那么才能识别,一般只用于表单元素的处理)
document.getElementsByName()
// 获取页面中的head / body / html
document.head
document.body
document.documentElement
// 在指定上下文中,通过选择器获取到指定的元素对象 (不兼容IE6~8)
[context].querySelector([selector])
// 在指定上下文中,通过选择器获取到指定的元素集合 (不兼容IE6~8)
[context].querySelectorAll([selector])
HTML
<div class="tabBox" id="tabBox">
<ul class="tab" id="tab">
<li>第1个页卡</li>
<li>第2个页卡</li>
<li>第3个页卡</li>
</ul>
<div>第1个要展示的内容
<ul class="news">
<li>新大声道氨基酸客户端换卡机收到货</li>
<li>新大声道氨基酸客户端换卡机收到货</li>
<li>新大声道氨基酸客户端换卡机收到货</li>
<li>新大声道氨基酸客户端换卡机收到货</li>
</ul>
</div>
<div>第2个要展示的内容
<div class="detail">时间萨克来得快</div>
</div>
<div>第3个要展示的内容</div>
<div class="formBox">
性别:
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
<input type="radio" value="外星人" name="sex">外星人
<buttom id="submit">点击获取</buttom>
</div>
</div>
JS
// let tabBox = document.getElementById('tabBox')
//基于getElementsByClassName / getElementsByTagName
// 获取到的是元素集合,要想操作某一个元素需要在集合中根据索引取出来才可以使用
// let tabBox = document.getElementsByClassName('tabBox')[0]
// querySelector:获取的是元素的第一个对象,如果页面中有多个,也只获取第一个
let tabBox = document.querySelector('.tabBox')
//querySelectorAll: 获取到的是一个集合
// let tabBox = document.querySelectorAll('.tabBox')[0]
// console.log(tabBox)
// getElementsByTagName: 获取指定上下文中所有标签名为n的元素集合
// let navList = tabBox.getElementsByTagName('li')
// console.log(navList) // =>HTMLCollection(7) [li, li, li, li, li, li, li]
// let tab = tabBox.querySelector('.tab')
// let navList = tab.getElementsByTagName('li')
// console.log(navList) // =>HTMLCollection(3) [li, li, li]
// 获取指定标签下的div
let navList = tabBox.querySelectorAll('.tab li')
console.log(navList) // => NodeList(3) [li, li, li]
// 获取指定标签下的div
let divList = document.querySelectorAll('.tabBox>div')
console.log(divList) // =>NodeList(3) [div, div, div]
let sexList = document.getElementsByName('sex')
console.log(sexList) // =>NodeList(3) [input, input, input]
let submit = document.getElementById('submit')
submit.onclick = function () {
var result = null
for (let i = 0; i < sexList.length; i++) {
var item = sexList[i];
if (item.checked) {
result = item.value
break
}
}
alert(result)
}
// JS中节点和描述节点之间关系的属性
// 节点:Node
// 节点集合:NodeList(getElementByName/querySelectorAll获取的都是节点集合)
// 元素节点(元素标签)
// nodeType: 1 节点类型
// nodeName:大写的标签名
// nodeValue: null
// 文本节点
// nodeType: 3 节点类型
// nodeName:'#text'
// nodeValue: 文本内容
// 注释节点
// nodeType: 8 节点类型
// nodeName:'#commen'
// nodeValue: 注释内容
// 文档节点document
// nodeType: 9 节点类型
// nodeName:'#document'
// nodeValue: null
// ...
// 描述这些节点之间关系的属性
// childNodes: 获取所有子节点
// childre: 获取所有的元素子节点(子元素标签集合)
//firstChild: 获取第一个子节点
// lastChild:获取最后一个子节点
// firstElementChild /lastElementChild: 获取第一个和最后一个元素子节点(不兼容IE6~8)
// previousSibling: 获取上一个哥哥节点
// nextSibling: 获取下一个弟弟节点
// previousElementSibling / nextElementSibling 获取哥哥/弟弟元素节点(不兼容IE6~8)
网友评论