526互联

JS之BOM、DOM

发布时间 2023-03-27 12:04:25作者: 古锁阳关

https://www.cnblogs.com/12345huangchun/p/10171146.html

一、BOM对象

　　1，window对象

　　所有浏览器都支持window对象，从概念上讲：一个HTML文档对应一个window对象，从功能上讲：控制浏览器窗口的，从使用上讲：window对象不需要创建对象，直接使用即可

　　2，window对象方法

复制代码
alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。
复制代码

　　3，方法的使用

　　3.1弹窗方法，警告窗alert、确认窗confirm、输入窗prompt

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function waring() {
            alert('小心点')
        }
        function certain() {
            var status=confirm('确定跳转？');
            if (status){
                location.href='http://www.baidu.com';
        }
        }
        function shuru() {
            var content=prompt('请输入');
            console.log(content)
        }
    </script>
</head>
<body>
    <button onclick="waring()">警告窗</button>
    <button onclick="certain()">确认窗</button>
    <button onclick="shuru()">输入窗</button>
</body>
</html>
复制代码

　　3.2 setinterval：间隔指定的毫秒数不停的执行指定的代码、clearInterval：停止方法

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function gettime() {
            let now=new Date().toLocaleString();
            let ss=document.getElementById('content');
            ss.value=now;
        }
        var id;
        function settime() {
            if (id==undefined){
                gettime();
                id=setInterval(gettime,1000);    #每1000毫秒（即1秒）后执行
            }
        }
        function over() {
            clearInterval(id);
            id=undefined
        }
    </script>
</head>
<body>
    <input type="text" id="content">
    <button onclick="settime()">start</button>
    <button onclick="over()">end</button>
</body>
</html>
复制代码

　　3.3 settimeout（）：在指定的毫秒数后执行代码，cleartimeout（）：停止

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="set()">执行</button>
    <button onclick="cle()">停止</button>
    <p id="p1">欢迎光临</p>
    <script>
        var id;
        function set(){
            id=setTimeout(function () {
           document.getElementById('p1').innerHTML='谢谢'
        },3000)
        }
        function cle() {
            clearTimeout(id)
        }
    </script>
</body>
</html>
复制代码

　　二、DOM对象

　　HTML document object model（文档对象模型）

　　1，DOM树，展示文档中各个对象的关系，用于导航

　　2，节点关系

　　3，节点查找方法

　　3.1 直接查找

复制代码
document.getElementById();   #通过id查找，得到是一个准确标签
document.getElementsByClassName();      #通过类查找，不管同一类有几个标签，得到都是由同一类标签组成的数组
document.getElementsByTagName();        #通过标签名查找，不管同一种标签有几个，得到的都是由同一种标签组成的数组
document.getElementsByName();      #通过name属性查找，返回的是同一name值的标签组成的数组
注意：涉及寻找元素，注意<script>的位置，写在被查找标签后面
复制代码

　　3.2 导航查找

复制代码
'''

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

'''
注意：是没法直接找到所有的兄弟标签
复制代码

　　4，节点操作

复制代码
创建节点
var tag=document.createElement（标签名）
var father=document.Element.....

添加节点
追加一个子节点
father.appendchild(tag)      在father标签里加一个tag标签
在某个节点前面加一个节点
var ele=document.getElement.....
father.insertbefore(tag,ele)     在father标签里的ele节点前加上tag节点

删除节点
var ele=document.getElement.....
father.removechild(ele)     删除father标签里的ele节点

替换节点
var ele=document.getElement.....
father.replace(tag,ele)     把father标签里的ele节点换成tag新节点
注意：所有的添加、删除、替换节点都是基于父级标签来操作的。创建几个节点，就最多可以添加几个节点。比如创建一个节点，最多添加几个节点
复制代码
 节点操作例子

　　5，节点属性操作

　　5.1 文本操作：innerHTML，innerText

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1"><a href="#">欢迎来电</a></div>
    <script>
        var t1=document.getElementsByClassName('c1')[0].innerHTML;
        var t2=document.getElementsByClassName('c1')[0].innerText;
        console.log(t1);
        console.log(t2);
    </script>
</body>
</html>
innerHTML拿到的是对应标签里包含的所有内容，包括标签，比如上面的例子拿到‘<a href="#">欢迎来电</a>’
innerText拿到的只是内容，没有标签，比如上面的例子就只拿到‘欢迎来电’，而没有a标签
复制代码

　　5.2 属性操作

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: yellow;
        }
        .c2{
            color: white;
        }
        .c3{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="d1">你好啊</div>
    <button onclick="set1()">加背景</button>
    <button onclick="set2()">加背景，字体颜色，字体大小</button>
    <button onclick="rem1()">去掉class属性</button>
    <button onclick="get1()">拿到class属性</button>
    <script>
        var ele=document.getElementById('d1');
        function set1(){
            ele.setAttribute('class','c1')        #给标签设置属性，第一个参数为属性名，第二参数为属性值
        }
        function set2() {
            ele.setAttribute('class','c1 c2 c3')
        }
        function rem1() {
            ele.removeAttribute('class')         #把标签的某个属性给删除，参数为属性名
        }
        function get1() {
            var va=ele.getAttribute('class');        #拿到标签的某个属性值，参数为属性名
            console.log(va)
        }
    </script>
</body>
</html>
复制代码

　　5.3 class属性操作

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: grey;
            color: yellow;
            font-size: 20px;
            margin-bottom: 5px;
        }
        ul{
            list-style: none;
        }
        .hh{
            display: none;
        }
    </style>
</head>
<body>
    <div class="c1">菜单一</div>
    <ul class="hh">
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <div class="c1">菜单二</div>
    <ul class="hh">
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ul>
    <div class="c1">菜单三</div>
    <ul class="hh">
        <li>333</li>
        <li>333</li>
        <li>333</li>
    </ul>
    <script>
        var eles=document.getElementsByClassName('c1');
        for ( var i=0;i<eles.length;i++){
            eles[i].onclick=function () {
                for (var j=0;j<eles.length;j++){
                    if (eles[j]!=this){
                        eles[j].nextElementSibling.classList.add('hh')     #在标签的class属性列表里加‘hh类’。若已经存在，就不用添加
                    }
                }
                this.nextElementSibling.classList.remove('hh')          #把标签的class属性列表里删除‘hh类’，若不存在，就不用删除
            }
        }
复制代码

　　5.4 改变css样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p1">这是一个寂寞的天，下着有些伤心的雨</p>
</body>
    <script>
        document.getElementById('p1').style.color='red';
        document.getElementById('p1').style.fontSize='30px';
    </script>
</html>
注意：对于中间用—连接的属性，在这里中间的—给去掉。比如font—size写成fontSize，后面的单词首字母大写
复制代码

　　5.5 value操作

对于input，select，textarea标签来说，可以.value获取到value值

 　　6，事件

　　6.1 事件分类

复制代码
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。
复制代码

　　6.2 绑定事件方法

　　方法一：

复制代码
<div id="div" onclick="foo(this)">点我呀</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("点你大爷!");
        console.log(self);   
    }
</script>
复制代码

　　方法二：

复制代码
<p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>
复制代码

　　6.3 事件介绍

　　onload：给body元素加onload，意味着页面内容被加载完成然后做某事，应用场景：有些动作需要在页面加载完成后立即执行，就可以用这属性

 View Code

　　onsubmit：当表单提交触发，该属性只能给form元素使用。在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交

 View Code

　　onselect：

 View Code

　　onchange：

 View Code

　　onkeydown：

 View Code

　　7，实例

　　7.1 二级联动

 View Code

　　7.2 导航栏

 View Code

　　7.3三级联动

 View Code

　　7.4模态对话框

 View Code