一站式搞定Javascript(四)dom操作

一级目录

二级目录

三级目录

前言： 上一章中我们讨论了数组和对象，这一章我们来看一下JS中自带的内置对象和操作Dom。

日期与Math内置对象

Math	Date
绝对值 abs(-1.1)	当前日期时间new Date()
向下取整 floor(-1.1)	获取几号getDate()
向上取整 ceil(-1.1)	获取星期几getDay()
四舍五入 Math.round(-1.1)	年getFullYear()
随机数 random()	月getMonth() + 1

注意：随机数的内置对象指的是0~1之间的随机数

练习1：封装一个取随机数的函数 50,100

     function getRandom(min,max){
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        console.log(getRandom(50,100))

练习2： 封装函数格式化时间：xxxx年x月x号 星期x xx点xx分xx秒

 function getDateStr(){
            var d = new Date();
            var year = d.getFullYear()
            var month = d.getMonth() + 1;
            var date1 = d.getDate()
            var day = d.getDay()
            var hour = d.getHours()
            var minutes = d.getMinutes()
            var second = d.getSeconds()
            var arr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]
            return `今天是：${year}年${month}月${date1}日 ${arr[day]} ${hour}点${minutes}分${second}秒`
        }
        console.log(getDateStr())

DOM操作

获取DOM

1.根据id名称获取 ，永远获取一个，如果出现相同的id名称则获取第一个
document.getElementById(“box”)
2.根据class名获取，获取的一组元素放进一个伪数组中
document.getElementsByClassName(“list”)
3.根据标签名获取 获取的一组元素放进一个伪数组中
document.getElementsByTagName(“li”)[2]
4.根据css选择器获取单个元素
document.querySelector(“.qwe>span”)
5.根据css选择器获取多个元素放在伪数组中
document.querySelectorAll(“ul>li”)
6.添加行内样式 元素.style.样式 = 样式值
div2.style.width = “100px”;

详细使用：

<div id="box" class="content">1</div>
    <div id="qwe" class="content">2</div>

    <div class="qwe">
        div
        <span>span</span>
    </div>

    <ul>
        <li class="list">1</li>
        <li class="list">2</li>
        <li class="list">3</li>
        <li class="list">4</li>
        <li class="list">5</li>
        <li class="list">6</li>
        <li class="list">7</li>
        <li class="list">8</li>
        <li class="list">9</li>
        <li class="list">10</li>
    </ul>
      // 1.根据id名称获取 永远获取一个，如果出现相同的id名称则获取第一个
        var div = document.getElementById("box")
        console.log(div)
        // 2.根据class名获取 获取的一组元素放进一个伪数组中
        var divs = document.getElementsByClassName("content")
        console.log(divs)
        console.log(divs[1])

        var lists = document.getElementsByClassName("list")
        console.log(lists[6])

        // 3.根据标签名获取 获取的一组元素放进一个伪数组中
        var lists = document.getElementsByTagName("li")[2]
        console.log(lists)

        // 4.根据css选择器获取单个元素
        var span = document.querySelector(".qwe>span")
        console.log(span)
        var li5 = document.querySelector("ul>li:nth-of-type(5)")
        console.log(li5)

        // 5.根据css选择器获取多个元素放在伪数组中
        var lists = document.querySelectorAll("ul>li")
        console.log(lists)


        // 6.添加行内样式 元素.style.样式 = 样式值
        // 样式在js中如果有横杠去掉横杠变成小驼峰
        var div2 = document.getElementsByClassName("content")[1]
        div2.style.width = "100px";
        div2.style.height = "100px";
        div2.style.backgroundColor = "pink"
    </script>

事件的绑定

DOM0级事件处理程序（传统方法）:

直接在DOM元素的属性中指定事件处理函数。例如，在HTML元素中直接使用onclick、onmouseover等属性。

语法： on事件名称=事件处理函数

<button onclick="alert('Hello!')">点击我</button>

或者在JavaScript中直接为DOM对象的事件属性赋值一个函数。

 		<div class="content">按钮2</div>
        var div = document.getElementsByClassName("content")[0];
        div.onclick = function(){
            console.log("按钮2被触发")
        }

DOM2级事件处理程序（推荐）:

使用addEventListener方法为元素添加事件监听器。这种方法支持事件捕获和冒泡阶段，还可以为同一元素的同一事件添加多个监听器。

语法：元素.addEventListener(“事件类型”,“事件的处理函数”)

   var div = document.getElementsByClassName("content")[0];
   div.addEventListener("click",function(){
            console.log("dom1级绑定")
        })

鼠标事件	表单事件
click 单击	change 表单元素发生改变并失去焦点
dbclick 双击	input 表单元素发生改变
mousemove 鼠标移动	focus 聚焦
mouseenter 鼠标移入	reset 表单重置
mouseout 鼠标移出	select 选择文本
mouseleave 鼠标移出	submit 表单提交
wheel 鼠标滚轮	/

键盘事件
keysdown 按键按下
keyup 按键松开
keypree 按键按下并松开

练习：点击图片来回切换（图片地址自己替换）

    <img src="./img/01.png" alt="">
    <script>
        var arr = ["./img/01.png","./img/02.png","./img/03.png"];
        var img1 = document.getElementsByTagName("img")[0]
        var num = 0;
        img1.onclick = function(){
            num++;
            if(num >= arr.length){
                num = 0
            }
            img1.src = arr[num]
        }
    </script>

dom的增删改

增加

创建元素

     var div = document.createElement("div")
        div.innerHTML = "我是div标签"
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "pink";
        console.log(div)

控制台：

插入
父元素.appendChild(子元素)，成为最后一个子元素

    <div class="father">
        <span>1</span><span>2</span><span class="target">3</span><span>4</span><span>5</span>
    </div>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
    </ul>
    <script>
     var div = document.createElement("div")
        div.innerHTML = "我是div标签"
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "pink";
        console.log(div)
// js中有几个特殊标签不需要获取 document.body document.documentElement
        console.log(document.documentElement)
        document.body.appendChild(div)
    </script>

从

到

父元素.insertBefore(a,b) 插入a在b之前

//html还是按之前的
  var div = document.createElement("div")
        div.innerHTML = "我是div标签"
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "pink";
var father = document.getElementsByClassName("father")[0]
var span3 = document.getElementsByClassName("target")[0]
father.insertBefore(div,span3)

删除

元素本身.remove()

       var lis = document.getElementsByTagName("li")
        for(let i = 0 ; i < lis.length ; i++){
            lis[i].onclick = function(){
                console.log(this.remove())
            }
        }

运行结果：点一个li删一个，可以自行尝试

父元素.removeChild(子元素)

var lis = document.getElementsByTagName("li")
var fatherUl = document.getElementsByTagName("ul")[0]
console.log( fatherUl.removeChild(lis[0]) )

替换

父元素.replaceChild(new,old)

        var lis = document.getElementsByTagName("li")
        var fatherUl = document.getElementsByTagName("ul")[0]
        var li = document.createElement("li")
        li.style.color = "red"
        li.innerHTML = "新的li"
        fatherUl.replaceChild(li,lis[4])