欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS之BOM、DOM

程序员文章站 2022-11-21 17:13:07
一、BOM对象 1，window对象 所有浏览器都支持window对象，从概念上讲：一个HTML文档对应一个window对象，从功能上讲：控制浏览器窗口的，从使用上讲：window对象不需要创建对象，直接使用即可 2，window对象方法 3，方法的使用 3.1弹窗方法，警告窗alert、确认窗co ......

　　一、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树，展示文档中各个对象的关系，用于导航

JS之BOM、DOMJS之BOM、DOM

　　2，节点关系

JS之BOM、DOM

　　3，节点查找方法

　　3.1 直接查找

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

　　3.2 导航查找

'''

parentelement           // 父节点标签元素

children                // 所有子标签

firstelementchild       // 第一个子标签元素

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

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

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

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

　　4，节点操作

　　4.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标签

JS之BOM、DOM

　　4.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>

　　4.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类’，若不存在，就不用删除
            }
        }

　　4.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，后面的单词首字母大写

　　4.5 value操作

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

 

上一篇： php判断数组是否为空的实例方法

下一篇： Django+Celery异步发送邮件

推荐阅读