前端基础之BOM和DOM

JavaScript分为ECMAScript,Dom,BOM

BOM(Browser Object Model)是指浏览器窗口对象模型,顶级对象是window

DOM(Document Object Model)是指文档对象模型,并非一个对象

window和document都是一个实例对象,他们都属于object,表示浏览器中打开的窗口.window对象是客户端JavaScript最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用.

alert()    显示带有一段消息和一个确认按钮的警告框

setInterval()    按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval()　取消由setInterval()设置的timeout

setTimeout()    在指定的毫秒数后调用函数或计算表达式
clearTimeout()    取消由setTimeout()方法设置timeout

confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框

prompt()    显示可提供用户输入的对话框

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

例子:
open("https://www.baidu.com");
close("https://www.baidu.com");

如果close()中没有参数,则是关闭当前窗口

alert()            显示带有一段消息和一个确认按钮的警告框。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

例子

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

View Code

navigator对象

浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器的相关信息

navigator.appName    //web浏览器全称
navigator.appVersion    //web浏览器厂商和版本的详细字符串
navigator.userAgent    //客户端绝大部分信息
navigator.platform    //浏览器运行所在的操作系统

history对象

浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以用来前进或后退一个页面

history.forward()    //前进一页
history.back()    //后退一页
history.go(n)    //前进n页

location对象

location.href    //获取URL
location.href="URL"    //跳转到指定的页面
location.reload()    //重新加载页面

DOM

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法

它是一个系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容,结构和样式进行访问和修改.简言之,DOM是一种API(应用编程接口)

DOM标准规定HTML文档中的每个成分都是一个节点(node):

　　文档节点(document对象):代表整个文档

　　元素节点(element对象):代表一个元素(标签)

　　文本节点(text对象):代表元素(标签)中的文本

　　属性节点(attribute对象):代表一个属性,元素(标签)才有属性

　　注释是注释节点(comment对象)

查找标签

document.getElementById("id")    //根据ID获取一个标签
document.getElementsByName("name")    //根据name属性获取标签集合
document.getElementsByClassName("类名")    //根据class属性获取
document.getElementsByTagName("标签名")    //根据标签名获取标签合集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>DOM文档结构</title>

</head>
<body>
<h1>DOM文档结构</h1>
<a href="https://www.sogou.com">搜狗一下</a>
<div class="c1">
    000
    <!--这是注释-->
    111
    <div>
        <p id="p1">p标签</p>
    </div>
    222
</div>
<div class="c1">c1</div>
<div class="c2">c2</div>
<input type="text" name="username" >
</body>
</html>

示例代码,下面截图是根据这个代码进行的操作

间接查找

parentNode    //父节点
childNodes    //所有子节点
firstChild    //第一个子节点
lastChild    //最后一个子节点
nextSibling    //下一个兄弟节点
previousSibling    //上一个兄弟节点
//注意节点和标签的区别,主要记住下面的
parentElement    //父节点标签元素
children    //所有子标签
firstElementChild    //第一个子标签元素
lastElementChild    //最后一个子标签元素
nextElementSibling    //下一个兄弟标签元素
previousElementSibling    //上一个兄弟标签元素

间接查找标签元素的使用方法同节点的使用方法相同

document对象的属性和操作

属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>class属性操作</title>
    <style>
        .c1 {
            height:300px;
            width:300px;
            border-radius:150px;
            background-color: red;
        }
        .c2 {
            background-color:yellow;
        }
    </style>
    <script>
        function change(){
            //找标签,改背景颜色
            var d1=document.getElementById("d1");
//            classList.toggle(cls)  存在就删除，
            d1.classList.toggle("c2");
        }
    </script>
</head>
<body>
<div id="d1" class="c1"></div>
<input type="button" value="切换" onclick="change()">

</body>
</html>

例题,截图中的源代码

文本节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>DOM文档结构</title>

</head>
<body>
<h1>DOM文档结构</h1>
<a href="https://www.sogou.com">搜狗一下</a>
<div class="c1">
    000
    <!--这是注释-->
    111
    <div>
        <p id="p1">p标签</p>
    </div>
    <a href=""></a>
    222
</div>
<div class="c1">c1</div>
<div class="c2">c2</div>
<input type="text" name="username" >
</body>
</html>

示例,截图中的源代码

样式操作

className    //获取所有样式类名(字符串)
classList.remove(cls)    //删除指定类
classList.add(cls)    //添加类
classList.contains(cls)    //存在返回true,否则返回false
classList.toggle(cls)    //存在就删除,否则就添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <script>
        function run(){
            //找到ID值为i1的标签
            var ele=document.getElementById("i1");
            //获取标签的文本内容,赋值给str变量
            var str= ele.innerText;
            //把字符串第一位拿出来
            var firstStr=str.charAt(0);
            //拼接到最后组成新的字符串
            var newText=str.slice(1)+ firstStr;
            //赋值给标签的文本内容
            ele.innerText=newText;

        }
        var timmer=setInterval(run,500);
        // 取消由 setInterval() 设置的 timeout,取消之后就回马灯就不会滚动了
//         clearInterval(timmer);
    </script>
</head>
<body>
<h1 id="i1">好好学习,天天向上!</h1>
</body>
</html>

跑马灯示例,里面有用到toggle

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

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

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

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            color: chartreuse;
        }
        p.c1{
            color: black;
        }
        div p{
            color: coral;
        }
    </style>
    <!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">-->
</head>
<body>
<p id="i1" class="c1">hello</p>

<div>
    <button class="gb_P" type="button">
        what

    </button>
    <p>qingqin</p>
    <div>what are you 弄啥嘞</div>
</div>

<script>   //在script中绑定事件    
    var btn = document.getElementById("i1");
    btn.onclick=function () {
        alert(123)
    }

</script>
</body>
</html>

在<script>标签中绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            color: chartreuse;
        }
        p.c1{
            color: black;
        }
        div p{
            color: coral;
        }
    </style>
    <!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">-->
</head>
<body>
<p id="i1" class="c1" onclick="func">hello</p>

<div>
    <button class="gb_P" type="button">
        what

    </button>
    <p>qingqin</p>
    <div>what are you 弄啥嘞</div>
</div>

<script>
  function show() {
        alert(123)
    }

</script>
</body>
</html>

在内联元素中绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>绑定多个事件</title>
</head>
<body>
<input type="button" value="点我" id="i1">
<script>
    function f1(){
        console.log(1);
    }
    function f2(){
        console.log(2);
    }
    //查找id为i1的标签
    var i1Ele=document.getElementById("i1");
//    i1Ele.onclick=function () {
//        //点击之后要执行的函数
//        f1();
//    };
//    i1Ele.onclick=function () {
//        f2()
//    };
    //JS代码的方法绑定事件,下面的事件会把上面的覆盖掉.不能够同时绑定事件
//    使用addEventListener,可以同时绑定多个事件,不覆盖
    i1Ele.addEventListener("click",f1);
    i1Ele.addEventListener("click",f2);
</script>
</body>
</html>

使用addEventListener同时绑定多个事件

常用的那些

操作内容

innerText  文本
innerHTML  HTML内容
value  值

文档节点的增删改查

增

createElement(name)  创建节点（标签）

appendChild() 末尾添加节点，并返回新增节点
insertBefore()  参照节点之前插入节点，两个参数：要插入的节点和参照节点

删

查找到要删除的元素
获取它的父元素
使用removeChild()方法删除

改

第一种方式:

使用上面增和删结合完成修改

第二种方式:

使用setAttribute();方法修改属性

使用innerHTML属性修改元素的内容

查

使用之前介绍的方法.

posted @ 2017-12-28 16:39 dwenwen 阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

dwenwen