获取DOM元素和修改

DOM——文档对象模型 是用来呈现以及任意HTML或XML文档交互的API 用来开发网页内容特效和实现用户交互。

一.获取DOM元素

1.querySelectorAll 能直接修改

2.根据css选择器获取dom元素得到的是一个伪数组：有长度有索引号的数组，但是没用pop push等数组方法 想要得到里面的每一个对象 需要遍历for的方式获得

3.querySelector()只能选择一个元素，可以直接操作

4.小括号里面写css选择器 必须是字符串 加引号

<script>
            
            /*1.js获取一个元素*/
            let div = document.querySelector('.three')
            console.log(div)
            
            let li = document.querySelector('ul li:last-child')
            console.log(li)
            
            /*2.js 获取多个元素*/
            let lis = document.querySelectorAll('ul li')
            console.log(lis)
            /*通过遍历的方式，获得里面的每一个dom元素*/
            for(let i =0;i<lis.length;i++){
                console.log(lis[i])
            }
            
            let zt = document.querySelectorAll('nav li')
            for(let i = 0;i<zt.length;i++){
                console.log(zt[i])
            }
            
            /*根据id获取一个元素*/
            document.getElementById('nav')
            /*根据标签或取一类元素 或取页面 所有div*/
            document.getElementsByTagName('div')
            /*根据类名获取元素 获取页面 所有类名为w的*/
            document.getElementsByClassName('w')
            
        </script>

二.设置/修改DOM元素内容的三种方式

1.documen.write（）方法  ps:只能追加到body中

2.元素.innerText属性   ps:只识别内容，不能解析标签

3.元素.innerHTML属性  ps:可以解析标签

<script>
            /*1.获取标签*/
            let box = document.querySelector('div')
            /*2.修改标签内容 box是对象 innertext属性*/
            /*对象.属性=值*/
            box.innerText='有点意思'
            box.innerHTML='<strong>有点意思</strong>'
        </script>