DOM

• DOM(Document Object Model): 文档对象模型
• 其实就是操作 html 中的标签的一些能力
• DOM 的核心对象就是 document 对象
• DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象

获取常规元素

通过 JS 代码来获取页面中的标签, 获取后我们就可以操作这些标签

querySelector

• 语法: document.querySelector('像写CSS选择器一样书写标签')
• 返回值: 符合条件的第一个标签

console.log(document.querySelector('div'))  // 获取页面中第一个 div 元素
console.log(document.querySelector('.box'))  // 获取页面中第一个 有 box 类名的元素
console.log(document.querySelector('#box'))  // 获取页面中第一个 id 名为 box 的元素

querySelectorAll

• 语法: document.querySelectorAll('像写CSS选择器一样书写标签')
• 返回值: 返回一个符合条件的标签组成的 伪数组
• 需要用索引来获取到准确的每一个 DOM 元素

        var mySpan = document.querySelectorAll('.spanel')
        console.log(mySpan)
        // console.log(mySpan[0])

获取样式

元素/标签.style

• 能够拿到 行内 样式, 或者给添加一个行内样式

        var oDiv = document.querySelector('div')
        console.log(oDiv.style.background-color)   // color is not defined，点语法判定-为减号
        console.log(oDiv.style.'background-color')   // 语法不支持
        console.log(oDiv.style['background-color'])  // 中括号语法 能够获取 但是稍微有点麻烦
        console.log(oDiv.style.backgroundColor) // 推荐写法  
        oDiv.style.width = '200px'
         
        var btn = document.querySelector('#btn')
        var body = document.querySelector('body')

        /**
         *  添加事件
         * 
         *      1. 声明一个数组, 数组内部存放各种各样的颜色
         *      2. 点击事件触发的时候, 随机从数组内拿到一个颜色
         *      3. 赋值给 body 的背景色
        */
        var arr = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#800080', '#ffa500']
        btn.onclick = function () {
        var num = Math.floor(Math.random() * arr.length)
        body.style.backgroundColor = arr[num]
        }

getComputedStyle('要查询样式的标签').要查询的样式名

• 能够获取到元素的样式 (行内和非行内都可以)
• 但是获取到的内容是只读的, 只允许查询, 不允许修改

        console.log(getComputedStyle(newDiv).width);
        console.log(getComputedStyle(newDiv).backgroundColor);

操作元素类名

元素/标签.className

能够得到元素目前拥有的类名，还可以给这个属性重新赋值, 然后修改当前标签的类名

元素/标签.classList

• 返回值 是一个伪数组
• 数组内下表对应的是我们的每一个类名
• value 属性对应的是我们完整类名的字符串

        console.log(box.className)
        box.className = 'box2'   // 当前方式 不管之前有多少类名, 全都重新覆盖掉
        box.className = box.className + ' box2'
        box.className += ' box2'    // 类名之间一定要加 空格
        box.className = ''  // 相当于清空之前的所有类名
        
        console.log(box.classList)
        box.classList.add('box2')   // 向这个标签上在追加一个类名, 原本的类名不受影响
        box.classList.remove('qwe') // 删除指定类名 
        
                var btn = document.querySelector('button')
        var out1 = document.querySelector('div')
        var btn1 = document.querySelector('.btn1')
        btn.onclick = function () {
            out1.classList.remove('close')
            out1.classList.add('show')
        }
        btn1.onclick = function () {
            out1.classList.remove('show')
            out1.classList.add('close')
        }

操作元素属性

        // 1. 获取标签属性
        console.log(box.getAttribute('class'))
        var res = box.getAttribute('qwe')
        console.log(res)
        
        // 2. 设置标签属性
        box.setAttribute('my_qwe', '这是通过 JS 添加的一个自定义属性')
        box.setAttribute('class', 'qf001')
        box.setAttribute('qwe', '通过 JS 将 qwe 的属性值 进行了一个修改')        

H5 自定义属性

• 在 H5 自定义属性中 data- 表示该属性是一个自定义属性
• data- 以后的内容才是属性名
• = 后面的内容才叫做属性值
• 每一个元素身上天生自带一个属性, 叫做 dataset, 是一个类似对象的数据结构
• 内部记录的是该元素身上所有 data- 开头的自定义属性
• 对于该元素 H5 自定义属性的操作, 就是对这个数据结构的操作(对象操作语法)
• data-属性名=属性值
• 获取：元素/标签.dataset.属性名(属性名不要带data-)

<div data-a="100" class="box"></div>

var oDiv = document.querySelector('div')
// 增
oDiv.dataset.age = 18
// 删
delete oDiv.dataset.a
// 查
console.log(oDiv.dataset.age)

//密码框（显示/隐藏）
        var inp = document.querySelector('input')
        var btn = document.querySelector('button')
        btn.onclick = function () {
            //inp.type
            inp.getAttribute('type') === 'password' ? inp.setAttribute('type', 'text') : inp.setAttribute('type', 'password')
        }
//全选
    全选:<input type="checkbox" checked>
    <hr>
    <input type="checkbox" class="inp">选项一
    <input type="checkbox" class="inp">选项二
    <input type="checkbox" class="inp">选项三
    <script>
        var inp1 = document.querySelector('input')
        var inp2 = document.querySelectorAll('.inp')
        console.dir(inp1)
        inp1.onclick = function () {
            for (i = 0; i < inp2.length; i++) {
                inp2[i].checked = inp1.checked
            }
        }
        for(j = 0; j < inp2.length; j++) {
            inp2[j].onclick = fn
        }
        function fn() {
            var num = 0
            for (k = 0; k < inp2.length; k++) {
                inp2[k].checked && num++
            }
            inp1.checked = num === 3 
        }

操作元素文本

• innerHTML/innerText/value
  • innerHTML/innerText 能够给 输入框之外的标签 添加展示文本
  • value 是专门给 输入框添加展示文本
  • innerHTML 认识字符串中的 标签, 能够将字符串中的标签转换成真正的标签进行渲染
  • innerText 不认识字符串中的标签，能够防止用户注入恶意代码

        var p1 = document.querySelector('#p1')
        var div2 = document.querySelector('#div2')
        var inp = document.querySelector('#inp')
        var script = document.querySelector('script')
        //其他
        console.log(div2.innerHTML);
        console.log(div2.innerText);
        //inp
        inp.value = '12'
        console.log(script.innerHTML);