JavaScript中DOM的使用(上)

DOM：文档对象模型，提供html文档，html标签元素的能力

DOM（Document Object Model）可以操作的内容：

获取一个元素

移除一个元素

创建一个元素

向页面添加一个元素

给元素绑定一些事件

获取元素的属性

给元素添加一些css样式

DOM的核心对象就是document对象，document里面存储了各种操作元素的方法

DOM：页面中的标签，我们通过js获取到后，就把这个对象叫做DOM对象

1. 第一类方法：

（1）获取标签元素（id）：getElementById('id值')：因为id值时唯一的，所以获取到的是一个值

（2）类数组（伪数组），不能使用array的常用方法，但是可以遍历，可以通过[]访问

（3）获取标签元素（tagname）：getElementsByTagName('标签名')：和className类似，也是获取到一个伪数组

（4）获取标签元素（classname)：getElementsByClassName('class')：获取到的元素是相同的类名的一组元素，是一个伪数组，但是不能使用数组的方法，只能通过索引进行遍历

2. 第二类方法

（1）querySelector()和querySelectorAll();括号中可写#id,.class,标签名等，id与class需要加相应的前缀符号；使用querySelector()时只能选中第一个元素，要选中全部时要使用querySelectorAll()，返回的是一个伪数组。

3. 添加类名：

（1）ele.className = 类名

（2）ele.classList.add(类名)；

4. 获取非行间样式(类/id等的属性值)

（1）window.getComputedStyle(元素).样式名（宽，高，颜色等）;

（2）ele.getAttribute(属性名id/class/src等)：获取属性值(自带属性和自定义属性)

（3）ele.setAttribute('id','box'):设置属性

（4）ele.removeAttribute('id'):移除属性

5. 操作元素内容

（1）innerHTML获取元素内部的HTML结构，设置其内容，其内容能解析html标签

（2）innerText:获取元素内部的文本（只能获取文本内容，不能解析html标签）

练习：

html部分：

<div class="content">
        <img src="images/book.jpg" alt="岛上书店" />
        <div class="r">
            <div id="book">书名：岛上书店</div>
            <input id="updatename" name="changeBook" value="换换名称" type="button" onclick="onUpdateBookName()" /><br>

            四季名称：
            <input name="season" type="text" value="春" />
            <input name="season" type="text" value="夏" />
            <input name="season" type="text" value="秋" />
            <input name="season" type="text" value="冬" /><br><br>

            <input name="b2" type="button" value="input内容" onclick="onShowInput()" />

            <input name="b3" type="button" value="四季名称" onclick="onSeason()" />
            <input name="b4" type="button" value="清空页面内容" onclick="onClear()" />
            <p id="replace"></p>
        </div>
    </div>

JavaScript部分：

<script type="text/javascript">
        /*
          做什么?
            点击换换名称按钮，更换书名
            1. 绑定点击事件
            2. 更改名内容
        */
        function onUpdateBookName() {
            var btn = document.querySelector('#updatename');
            var bname = document.querySelector('#book');
            var arr = ['JavaScript', 'web', 'C', 'python', 'go', '岛上书店'];
            // for (var i = 0; i < arr.length; i++) {
            //     bname.innerHTML.splice(bname.innerHTML.indexOf(':') + 1, bname.innerHTML.length, arr[i]);
            // }
            // console.log(bname.innerHTML);

            var index = Math.floor(Math.random() * arr.length);
            bname.innerHTML = '书名：' + arr[index];
            console.log(index);

        }

        /*
          做什么?
            点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示
            1. input内容按钮点击事件
            2. 将所有input标签内容值拼接成字符串
                 
            3. 操作p标签内容
        
        */
        function onShowInput() {
            var inpCon = document.getElementsByTagName('input[name = "b2"]');
            var inpBtn = document.querySelectorAll('input[type = button');
            var contentP = document.querySelector('#replace');
            // var str = 
            var str = '';
            for (var i = 0; i < inpBtn.length; i++) {
                // console.log(inpBtn[i].value);
                str = str + inpBtn[i].value + ' &emsp;';
            }
            contentP.innerHTML = str;
            // console.log(contentP);
            // contentP.innerHTML = str;
        }

        /*
           做什么?
             点击四季名称按钮，拼接四季名称显示

        */
        function onSeason() {
            var seasonName = document.querySelector('input[name = "b3"]');
            var seasonBtn = document.querySelectorAll('input[name = "season"]');
            var contentP = document.querySelector('#replace');
            // seasonName.onclick = function () {
            //     seasonBtn.join('');
            // }
            var str1 = '';
            for (var i = 0; i < seasonBtn.length; i++) {
                str1 += seasonBtn[i].value + ' &emsp;';
            }
            contentP.innerHTML = str1;
        }

        function onClear() {
            document.write('')
        }

    </script>

6. 操作元素css样式

（1）style行内式：专门用来给元素添加css行内样式：

（2）className,class类样式：专门用来操作元素的类名，也可以设置元素的类名，设置后会覆盖原来的类名：

（3）classList动态添加移除class样式

添加样式：div.classList.add('active'):

function addClass(elem, style) {
        if (elem.className) {
          // 判断样式是否已经存在
          if(elem.className.indexOf(style) == -1){
            let oldStyle = elem.className;
            let newStyle = oldStyle + " " + style;
            elem.className = newStyle;
          }
        } else {
          elem.className = style;
        }
 }

 移除指定样式：div.classList.remove('active'):

7. 操作属性

（1）getAttribute('属性名')：用来获取元素的某个属性，进行这一步之前需要先获取到元素：

（2）setAttribute('属性名'，'属性值') 

 （3）removeAttribute('属性名')：