文档对象模型

DOM ( Document Object Model)：文档对象模型
其实就是操作html中的标签的一些能力
DOM的核心对象就是docuemnt对象
document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM页面中的标签，我们通过js获取到以后，就把这个对象叫做DOM对象

document对象

获取html元素

getElementById('id属性值')

getElementById是通过标签的id名称来获取标签的,因为在一个页面中 id是唯一的,所以获取到的就是一个元素

<body>
    <div id="box"></div>
    
    <script>
        var box = document.getElementById( 'box')
        console.1og(box) // <div></div>
    </script>
</body>

getElementsByClassName('class属性')

getElementsByClassName是用过标签的class名称来获取标签的，因为页面中可能有多个元素的class名称一样，所以获取到的是一组元素，哪怕你获取的class只有一个，那也是获取一组元素，只不过这一组中只有一个DOM元素而已

<body>
    <div calss="box"></div>
    
    <script>
        var box = document.getElementsByClassName(' box')
        console.1og(box) // [<div></div>]
        console.1og(box[0]) // <div></div>
    </script>
</body>

getElementsByTagName('标签名')

getElementsByTagName是用过标签的标签名称来获取标签的,因为页面中可能有多个元素的标签名称一样，所以获取到的是一组元素，哪怕真的只有一个这个标签名,那么也是获取一-组元素，只不过这一组中只有一个DOM元素而已

<body>
    <div></div>
    <script>
        var box = document . getElementsByTagName('div' )
        console.1og(box) // [<div></div>]
        console.lo(box[0]) // <div></div>
    </script>
</body>

getElementsByName(' name属性')
querySelector和querySelectorAll

操作元素内容

innerHTML

获取元素内部的HTML结构

<body>
    <div>
        <p>
            <span>he11o</span>
        </p>
    </div>
    
    <script>
        var div = document.queryselector('div')
        console.log(div.innerHTML)
        /*
            <p>
                <span>he11o</span>
            </p>
        */
    </script>
</body>

设置元素的内容

<body>
    <div></div>
    
    <script>
        var div = document.querySelector('div')
        div.innerHTML = '<p>he11o</p>'
    </script>
</body>

innerText

获取元素内部的文本(只能获取到文本内容,获取不到html标签)

<body>
    <div>
        <p>
            <span>he11o</span>
        </p>
    </div>
    
    <script>
        var div = document.querySelector('div')
        console.log(div.innerText) // hello
    </script>
</body>

可以设置元素内部的文本

<body>
    <div></div>

    <script>
        var div = document.querySelector('div')
        div.innerText = '<p>he1lo</p>'
    </script>
</body>

value

value 表单元素内容

     <input type="text"/>

innerText 和 innerHTML区别:

innerText 以纯文本形式显示
```
 <h3>innerText设置的内容</h3> 
```
innerHTML

操作非表单元素 innerText 和 innerHTML
操作表单元素 value

操作元素CSS样式

style行内样式

专门用来给元素添加css样式的，添加的都是行内样式

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        div.style.width = "100px"
        div.style.height = "100px"
        div.style.backgroundColor = "pink"
        console.log(div)
        // <div style="width: 100px; height: 100px; background-color: pink;"></div>
    </script>
</body>

2. className class类样式

专门用来操作元素的类名的

<body>
    <div class="box"></div>
    <script>
        var div = document.querySelector(' div')
        console.1og(div.className) // box
    </script>
</body

也可以设置元素的类名,不过是全覆盖式的操作

<body>
    <div class="box"></div>
    <script>
        var div = document.querySelector('div')
        div.className = 'test '
       console.1og(div) // <div class="test"></div>
    </script>
</body>

在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖

classList动态添加移除class类样式

添加样式

dir.aslit,add'active';∈

移除指定样式

drcaslstsreove(active'i.

操作属性

getAttribute('属性名')

获取元素的某个属性(包括自定义属性)

<body>
    <div a="100" class= "box"></div>
    <script>
        var div = document.querySelector(' div')
        console.log(div.getAttribute('a')) // 100
        console.1og(div.getAttribute('class')) // box
    </script>
</body>

2. setAttribute('属性名',"属性值")

给元素设置一个属性(包括自定义属性)

<body>
    <div></div>
    <script>
        var div = document.querySelector(' div')
        div.setAttribute('a', 100)
        div.setAttribute('class', 'box')
        console.1og(div) // <div a="100" class="box"></div>
    </script>
</body>

3. removeAttribute(属性名')