JS DOM操作

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)