DOM

获取元素样式

<div class="item box">我是一个具有两个类名的 DIV</div>

var oDiv = document.querySelector('div')

1. 获取语法 元素.className
    console.log(oDiv.className)

2. 设置语法 元素.className = '新的类名'
    oDiv.className = oDiv.className + ' new_box'

3. 第二种获取语法
    console.log(oDiv.classList)

4. 第二种设置语法
    oDiv.classList.add('new_box')

5. 删除语法
    oDiv.classList.remove('box')

获取元素类名

语法: 元素.style.某个CSS属性----> 只能获取到行内样式

1. 获取元素样式
    console.log(元素.style.width)
    console.log(元素.style.height)

    console.log(oBox.style.background-color)    // 错误写法
    console.log(oBox.style['background-color']) // 中括号语法
    console.log(oBox.style.backgroundColor)     // 驼峰命名

2. 设置元素样式---> 只能设置给行内
    元素.style.backgroundColor = 'blue'

获取元素样式 (非行内)注意: 这种方式获取到的是只读的属性
    只读: 只能获取到, 但是不允许修改

console.log(window.getComputedStyle(元素).width)
console.log(window.getComputedStyle(元素).backgroundColor)

查看密码案例

密码:<input type="password">
<button>查看密码</button>

<script>
    var btn = document.getElementsByTagName('button')[0]
    var int = document.getElementsByTagName('input') [0]
    
    btn.onclick = function (){
        //获取int的属性名的值来判断
        if(int.type == 'password'){
            int.type = 'text'
        }else if(int.type == 'text'){
            int.type = 'password'
        }
    }
</script>

全选案例

全选<input type="checkbox" class="iptall">
<hr>
1<input type="checkbox" class="item"><br>
2<input type="checkbox" class="item"><br>
3<input type="checkbox" class="item"><br>
4<input type="checkbox" class="item">
<script>
    var iptall = document.getElementsByClassName('iptall')[0]
    var items = [...document.querySelectorAll('.item')]
    iptall.onclick = function(){
        items.forEach(function(item){
            item.checked = iptall.checked
        })
    }
    items.forEach(function(item){
        item.onclick = function(){
            iptall.checked = items.every(function(item){
                return item.checked
            })
        }
    })
</script>

DOM 节点

<div class="box">
    <p>哈哈哈</p>
    <span>yyyyyyyyyy</span>
</div>

1. 获取元素的子节点
    var oDiv = document.querySelector('div')
    console.log(oDiv.children)  // [p, span]获取元素的所有子级元素节点(只能获取到标签)
    console.log(oDiv.childNodes) //[text, p, text, span, text]

    获取所有的 子级节点(会把换行识别为一个文本, 标签当成 元素节点)
    div 结束标签的位置开始, 到p标签开始位置的换行会被识别为一个 text
    p 标签会被识别为一个元素节点
    p 结束标签到span开始标签前的换行会被识别为一个text
    span 标签会被是被识别为一个 元素节点
    span 标签结束位置到div 结束标签前的换行会被识别为一个text

2.获取元素的 第一个 子节点
console.log(oDiv.firstChild) //#text 获取的是 元素内部 第一个 子节点 (不一定是 子元素节点)

console.log(oDiv.firstElementChild)  //<p></p> 获取的是 元素内部 第一个 子 元素 节点

3.获取元素最后一个子节点
console.log(oDiv.lastChild)  //text  获取最后一个子节点, 也就是 span结束标签, 到div结束标签前的一个换行, 这里会被识别为 text

console.log(oDiv.lastElementChild)   // 获取最后一个子元素节点 ---> span

3.获取元素的兄弟节点
<ul>
    <li id="a">1</li>
    <li id="b">2</li>
    <li id="c">3</li>
</ul>
<script>
    // 获取兄弟节点
    var oli = document.getElementById('b')
    // console.log(oli)

    // 获取下一个兄弟节点
    console.log(oli.nextSibling)    // 获取下一个兄弟节点   ---> #text

    // 获取下一个兄弟元素节点
    console.log(oli.nextElementSibling) // 获取下一个兄弟元素节点  ---> <li id="c"></li>

    // 获取上一个兄弟节点
    console.log(oli.previousSibling)    // 获取上一个兄弟节点 ---> #text

    // 获取上一个兄弟元素节点
    console.log(oli.previousElementSibling) // 获取上一个兄弟元素节点 <li id="a"></li>

    // 获取元素的 父级节点
    var oli = document.getElementById('b')
    console.log(oli.parentNode)
</script>

节点分类

<ul x="100" y="200">
    <li>我是ul的子级</li>
</ul>
<script>
    // 节点分类
    var oUl = document.querySelector('ul')

    // 1. 元素节点
    var ele = oUl.firstElementChild
    // console.log(ele)

    // 2. 文本节点
    var text = oUl.firstChild
    // console.log(text)

    // 3. 属性节点
    var attr = oUl.attributes[0]
    // console.log(attr)


    //nodeType 节点类型
    console.log(ele.nodeType)   // 元素节点 打印 1
    console.log(text.nodeType)  // 文本节点 打印 3
    console.log(attr.nodeType)   // 属性节点 打印 2

    //nodeName 节点名称
    console.log(ele.nodeName)   // 元素节点节点名称  大写的 LI
    console.log(text.nodeName)  // 文本节点名称 #text
    console.log(attr.nodeName)  // 属性节点名称就是 属性名

    //nodeValue 节点的值
    console.log(ele.nodeValue)  // 元素节点 是没有 nodeValue
    console.log(text.nodeValue) // 文本节点 是  实际的文本的值
    console.log(attr.nodeValue) // 属性节点 是  实际的 属性值
</script>