JavaScript元素操作内置对象

一、DOM操作

1、DOM简介

文档对象模型，对页面元素的操作（内容是标签，样式是css），document是html整个页面的内容对象

代码实例：

<script>
    console.log(document)
    //当前页面所有标签，类似于py列表
    console.log(document.all)
    console.log(document.all[3],typeof document.all[3])
    //所有的img标签对象
    console.log(document.images)
    //所有的form标签对象
    console.log(document.forms)
    //所有的a标签对象
    console.log(document.links)
</script>

document当中每一个元素都是一个对象，在js中需要并可以对对象进行操作

在js dom中学习，首先掌握的是dom对象的获取，document给开发者提供了具体获取对象的方法

二、元素获取

1、getElementById

内置对象document的getElementById方法，来获取设置了id属性的元素，获取到的一个html对象，然后赋值给一个变量

2、getElementsByClassName

通过类名获取元素，返回一个类似于数组的对象，有索引，有长度

3、getElementsByTagName

通过标签名获取元素对象，返回一个类似于数组的对象，有索引，有长度

4、getElementsByName

获取当前页面所有指定name值的标签

代码实现：

<script>
    //根据id获取
    var div1 = document.getElementById("div1")
    console.log(div1)

    //根据class name获取
    var div2 = document.getElementsByClassName("div2")
    console.log(div2,div2.length,div2[0])

    //根据tag获取
    var div = document.getElementsByTagName("div")
    console.log(div)

    //根据name获取
    var sex = document.getElementsByName("sex")
    console.log(sex)
</script>

三、样式操作

可以通过style改变样式，style后面可以加当前标签可以用的所有css属性

设置样式属性的步骤：

1、获取元素

获取的是单个元素还是元素数组

2、设置元素的样式

这里是通过元素对象的style进行设置的

只有document.getElementById获取的是单个对象，是可以直接使用style的，其他三种方式获取的对象”数组”， 可以通过索引或循环之后加style

代码实现：

<script>
    //根据id获取
    var div1 = document.getElementById("div1")
    //修改样式，驼峰命名法
    div1.style.backgroundColor = "red"
    div1.style.fontSize = "40px"
    div1.style.color = "white"
</script>
<script>
    var lis = document.getElementsByTagName("li")
    //循环，i是索引
    for(var i=0;i< lis.length;i++){
        if(i%2==0){
            //通过索引获取对象
            lis[i].style.backgroundColor="gray"
        }else{
            lis[i].style.backgroundColor="green"
        }
        lis[i].style.color="red"
    }
</script>
<script>
    //通过索引来获取
    document.getElementsByClassName("div2")[1].style.fontSize = "50px"
</script>

四、属性操作

html属性是什么？在标签内以键值对存在的都是属性，key=”value”

1、hasAttribute判断指定的元素是否有指定属性

2、hasAttributes判断指定的元素是否有属性

3、setAttribute设置属性

4、getAttribute获取元素指定的属性

5、removeAttribute删除元素的指定属性

代码实现：

<script>
    //1、获取标签
    var img_obj = document.getElementById("yy")
    //2、判断是否拥有属性
    console.log(img_obj.hasAttribute("class"),img_obj.hasAttribute("alt"),img_obj.hasAttribute("style"))

    var content = document.getElementsByTagName("div")[0]
    console.log(img_obj.hasAttributes(),content.hasAttributes())

    //设置属性
    img_obj.setAttribute("src","./img/lian2.png")
    content.setAttribute("class","xx")

    //获取属性
    console.log(img_obj.getAttribute("src"),img_obj.getAttribute("style"))

    //删除属性
    img_obj.removeAttribute("title")
</script>

五、文本操作

innerHTML，设置和查看标签内的内容，包括HTML格式

innerTEXT，设置和查看标签内的纯文本内容

代码实现：

<script>
    //1、获取标签
    var img_obj = document.getElementById("yy")
    //2、判断是否拥有属性
    console.log(img_obj.hasAttribute("class"),img_obj.hasAttribute("alt"),img_obj.hasAttribute("style"))

    var content = document.getElementsByTagName("div")[0]
    console.log(img_obj.hasAttributes(),content.hasAttributes())

    //设置属性
    img_obj.setAttribute("src","./img/lian2.png")
    content.setAttribute("class","xx")

    //获取属性
    console.log(img_obj.getAttribute("src"),img_obj.getAttribute("style"))

    //删除属性
    img_obj.removeAttribute("title")
</script>

六、操作元素

方法	说明
createElement	创建元素对象，类型自己设置
createTextNode	创建文本节点，就是文本内容
cloneNode	克隆节点
removeChild	删除节点
appendChild	在元素的末尾添加子元素

代码实现：

<script>
    //1、获取元素
    var empty_obj = document.getElementById("empty")
    //2、创建元素对象p
    var p_obj = document.createElement("p")
    //3、创建文本对象
    var text_obj = document.createTextNode("创建文本节点")
    //4、添加
    p_obj.appendChild(text_obj)
    console.log(p_obj)
    empty_obj.appendChild(p_obj)

    // 创建元素对象
    var input_obj = document.createElement("input")
    //元素对象修改属性
    input_obj.setAttribute("type","password")
    //添加
    p_obj.appendChild(input_obj)

    //克隆，true表示将此元素所有内容都克隆一份
    var empty_obj2 = empty_obj.cloneNode(true)
    //添加
    document.body.appendChild(empty_obj2)
    //所有的子节点
    console.log("***************",empty_obj2.childNodes)
    //移除子节点第1个
    // empty_obj2.removeChild(empty_obj2.childNodes[0])
</script>

七、JavaScript事件

当单击之后（触发事件），执行函数内容

常见的 HTML 事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

    <script>
        //1、找到标签
        var btn = document.getElementById("add_bg")
        var p = document.getElementById("dg")
        var foods = document.getElementById("foods")
        //2、绑定事件  元素对象.事件 = function(){}
        btn.onclick = function () {
            // foods.appendChild(p.cloneNode(true))
            foods.appendChild(p)
        }

        //失去光标事件
        var username_obj = document.getElementById("username")
        username_obj.onblur = function () {
            // var value = username_obj.value
            //这个函数是元素对象触发之后调用的，当前对象就是当前元素
            var value = this.value
            alert(value)
        }
        //获取光标事件
        username_obj.onfocus = function () {
            console.log("获取光标了，可以输入用户名了。。。")
        }

        //获取元素对象
        var num = document.getElementById("num")
        //键盘摁下事件
        num.onkeydown = function () {
            console.log(1)
        }
        //键盘摁下后压着不放事件
        num.onkeypress = function () {
            console.log(2)
        }
        //键盘弹起事件
        num.onkeyup = function () {
            console.log(3)
        }

        //事件函数中的参数，名字随意，表示当前事件对象
        num.onkeydown = function (e) {
            console.log(e)
            console.log("摁下的键是："+e.key)
        }
    </script>

八、内置对象

1、计时器

setInterval()：间隔指定毫秒不停执行指定的代码

clearInterval()：清除反复执行的定时器

代码实现：

<script>
    //1、获取对象
    var box = document.getElementById("box")
    var stop = document.getElementById("stop")
    var start = document.getElementById("start")
    //2、定时器，可以接收返回值，用于停止
    var interval = setInterval(function () {
        //box.offsetTop获取top
        box.style.top = box.offsetTop + 10 + "px"
    }, 100)
    //3、绑定onclick事件
    stop.onclick = function () {
        //清除定时器
        clearInterval(interval)
    }
    start.onclick = function () {
        //清除定时器
        interval = setInterval(function () {
            //box.offsetTop获取top
            box.style.top = box.offsetTop + 10 + "px"
        }, 100)
    }
</script>

setTimeout()：间隔指定毫秒执行指定的代码，执行1次

clearTimeout：清除1次执行的定时器

代码实现：

<script>
    //1、获取对象
    var box = document.getElementById("box")
    var stop = document.getElementById("stop")
    //2、定时器，可以接收返回值，用于停止
    var timeout = setTimeout(function () {
        //box.offsetTop获取top
        box.style.top = box.offsetTop + 100 + "px"
    }, 2000)
    //3、绑定onclick事件
    stop.onclick = function () {
        //清除定时器
        clearTimeout(timeout)
    }
</script>

2、时间

时间对象在使用的时候需要使用new Date创建

代码实现：

    <script>
        //当前时间
        var mydate = new Date()
        //时间戳，距离1970年0点到现在的秒数
        console.log(mydate.getTime())
        //年
        console.log(mydate.getFullYear())
        //月 0-11
        console.log(mydate.getMonth()+1)
        //日
        console.log(mydate.getDate())
        //时分秒
        console.log(mydate.getHours())
        console.log(mydate.getMinutes())
        console.log(mydate.getSeconds())
    </script>

3、数组

数组是一组数据的集合，js中的数组类似py中的列表，但是方法没有列表方法多，数组的特点可以存放任何类型的元素

1、创建数组

2、添加数据

push：在结尾添加元素

unshift：在头部添加元素

3、获取

使用下标元素从0开始

4、删除和修改

pop：删除并返回最后一个元素

shift：删除并返回第一个元素

splice(a,b,c)：第一个参数数组的起始位置，第二个参数是长度，第三个参数是要替换成的内容

代码实现：

    <script>
        // var array = new Array(1,2,"a","hello")
        var array = [1,2,"a","hello"]
        console.log(array,array.length)

        var array2 = [
            function (a,b) {
                console.log(a,b)
            },function (a,b,c) {
                console.log(a,b,c)
            }
        ]
        console.log(array2,array2.length)
        array2[1](1,2,3)


        var nums = [1,2,3]
        console.log(nums)
        //尾部添加
        nums.push(4)
        //头部添加
        nums.unshift(5)
        console.log(nums)


        var nums = [1,2,3]
        //索引，不支持负数
        console.log(nums[2],nums[-1])

        var nums = [1,2,3,4,5,6]
        //删尾部
        var ret = nums.pop()
        console.log(ret,nums)

        var nums = [1,2,3,4,5,6]
        //删头部
        var ret = nums.shift()
        console.log(ret,nums)


        var nums = [1,2,3,4,5,6]
        //删除
        nums.splice(0,3)
        console.log(nums)


        var nums = [1,2,3,4,5,6]
        //替换
        nums.splice(2,2,"hello")
        console.log(nums)

        var nums = [1,2,3,4,5,6]
        nums[2] = "哈哈"
        console.log(nums)
    </script>

九、数学

JavaScript Math 对象允许您对数字执行数学任务

代码实现：

    <script>
        //四舍五入
        console.log(Math.round(3.567));
        //最大值最小值
        console.log(Math.max(1,2,3,4),Math.min(1,2,3,4));
        //向上取整，向下取整
        console.log(Math.ceil(3.14),Math.floor(3.14));
        //随机小数
        console.log(Math.random())
    </script>