DOM & BOM

BOM

1、了解

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

使 JavaScript 有能力与浏览器“对话”。从而提供与浏览器交互的方法和接口

2、window对象

//window对象
    所有浏览器都支持 window 对象 表示浏览器窗口
    概念上讲.一个html文档对应一个window对象.
    功能上讲: 控制浏览器窗口的.
    使用上讲: window对象不需要创建对象,直接使用即可.

View Code

3、window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。   // 其方法有返回值,结果为布尔值 可以进行一系列的判断
prompt()           显示可提示用户输入的对话框。                    // 其方法有返回值,输入有内容，即返回内容;点取消则返回null
 
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

View Code

// 实例
// 在输入框,实现点击显示当前时间,并有stop按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #show{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <input type="text" id="show" onclick="begin()">  <!--绑定点击事件并触发begin函数-->
    <button onclick="end()">Stop</button>            <!--绑定点击事件并触发end函数-->

    <script>
        function showtime() {
            var date_time = new Date().toLocaleString();    // 获取当前事件
            var content = document.getElementById("show");  // 找到id为。。的标签
            content.value = date_time;                      // 对标签的value进行赋值
        }

        var clock;   // 声明变量
        function begin() {
            // 变量未被定义则为undefined
            if (clock==undefined){
                showtime();  // 执行函数
                clock = setInterval(showtime,1000);  // 多次计时 单位毫秒
            }
        }

        function end() {
            clearInterval(clock);  // 清空多次定时器
            clock=undefined;       // 重新赋值
            }
    </script>
</body>
</html>

setInterval clearInterval之多次定时器

setInterval clearInterval之多次定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="f1()">点我</button>
    <button onclick="f2()">停止</button>


    <script>
        var my_var;
        function f1() {
            my_var = setTimeout(function () {alert("Hello World")},3000);
            // 等待三秒  弹出框Hello World
        }

        function f2() {
            clearTimeout(my_var);
            // 清除单次计时器
            // 且必须在3000毫秒之前点击 否则无效
        }

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

setTimeout clearTimeout之单次定时器

setTimeout clearTimeout之单次定时器

4、History

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
length 返回浏览器历史列表中的 URL 数量。

// history方法
 
back()         加载 history 列表中的前一个 URL。
forward()    加载 history 列表中的下一个 URL。
go()            加载 history 列表中的某个具体页面。


<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

// go里面的参数 1 和 -1 对应

View Code

5、location

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。编写时可不使用 window 这个前缀。

Location提供的方法

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.assign(URL) 加载新文档
location.replace(newurl) 加载新文档
location.reload() 重新加载类似于浏览器刷新的快捷键F5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button onclick="newurl()">加载assign文档</button>
    <button onclick="myurl()">加载replace文档</button>
    <button onclick="flush()">刷新文档</button>
    <script>
        console.log(location.hostname);
        console.log(location.pathname);
        console.log(location.port);
        console.log(location.protocol);
        console.log(location.href);
        // assign
        function newurl() {
            location.assign("http://www.xiaohuar.com/")
        }

        // replace
        function myurl() {
            location.replace("http://www.xiaohuar.com/")
        }
        // assign与replace的区别  assign可返回 replace不可返回上个url

        // reload
        function flush() {
            location.reload()
        }

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

示例

练

DOM

1.简介

　　　a.定义：文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准

- - 什么是 XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
  - 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法

　　　　b.作用:

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

- - - JavaScript 能够改变页面中的所有 HTML 元素
    - JavaScript 能够改变页面中的所有 HTML 属性
    - JavaScript 能够改变页面中的所有 CSS 样式
    - JavaScript 能够对页面中的所有事件做出反应

2.节点类型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

3.节点关系

4.节点属性

　直接　查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
  
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

5.节点操作

内容

innerText  文本内容
 
innerHTML   HTML内容

属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

node（节点）增、删、改、查

// 增
 
document.createElement(name)    // 将创建标签由document来
父级标签.appendchild(name)           // 由父级标签添加
 
// 删
 
获取删除的标签
父级标签.removeChild(name)
 
// 改
 
第一种方式:
 
      先进行删除、再进行增加   增删进行配合操作
 
第二中方式:
 
      使用setAttribute();方法修改属性         
 
      使用innerHTML属性修改元素的内容

// 注意点: 根据class获取得到的是数组


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,.div2,.div3,.div4{
            width: 300px;
            height: 100px;
        }
        .div1{
            background-color: green;
        }
         .div2{
            background-color: yellow;
        }
         .div3{
            background-color: rebeccapurple;
        }
         .div4{
            background-color: deeppink;
        }
    </style>
</head>
<body>

<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">hello div4</div>


<script>
    function change() {
        var img=document.createElement("img");//<img src="">
        //img.setAttribute("src","meinv.jpg");
        img.src="meinv.jpg";

        var ele=document.getElementsByTagName("p")[0];
        var father=document.getElementsByClassName("div3")[0];

        father.replaceChild(img,ele)


    }
    function add() {
        var ele=document.createElement("p");//<p></p>
        ele.innerHTML="<h1>hello p</h1>";
        //ele.innerText="<h1>hello p</h1>";
        ele.style.color="red";
        ele.style.fontSize="10px";
        var father=document.getElementsByClassName("div1")[0];
        father.appendChild(ele)

    }

    function del() {
        var father=document.getElementsByClassName("div1")[0];
        var son=father.getElementsByTagName("p")[0];
        father.removeChild(son)

    }


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

View Code

class操作补充：

// 通过Elements去调用
 
className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

6.事件

对于事件需要注意的要点：

this
event
事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

7.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select name="sx" id="provinces">
        <option value="">省份</option>
    </select>

    <select name="sx" id="citys" size="1">
        <option value="">城市</option>

    </select>

    <script>
        // 数组
        var data = {"陕西":["西安","咸阳","宝鸡"],"山西":["太原","晋城","大同"]};
        // 通过ID取到对应标签
        var pro_ele = document.getElementById("provinces");
        var city_ele = document.getElementById("citys");

        // 遍历  i 为 键
        for (var i in data){
            // 创建option标签
            var pro_child = document.createElement("option");
            // 赋值
            pro_child.innerHTML = i;
            // 父级追加
            pro_ele.appendChild(pro_child)
        }

        // 怎样获取到选择的省份
        // 绑定onchange事件
        pro_ele.onchange = function () {
            // 如果下一次进入 默认清空内容  保留第一个option
            city_ele.length = 1;
            // this.selectedIndex代指选中索引
            // this.options获取select标签的option标签数组
            var province = this.options[this.selectedIndex].innerHTML;  // 取到选中的文本
            // 索引取值
            var citys = data[province];
            for (var i in citys){
                var city_child = document.createElement("option");
                city_child.innerHTML = citys[i];
                city_ele.appendChild(city_child);
            }

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

俩级联动

获取select文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button onclick="func1()">全选</button>
    <button onclick="func2()">取消</button>
    <button onclick="func3()">反选</button>
    <table>
        <tr>
            <td><input type="checkbox"></td>
            <td>篮球</td>
            <td>足球</td>
            <td>乒乓球</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>红茶</td>
            <td>绿茶</td>
            <td>咖啡</td>
        </tr>
         <tr>
            <td><input type="checkbox"></td>
            <td>桌子</td>
            <td>椅子</td>
            <td>柜子</td>
        </tr>
    </table>

    <script>

        var inputs = document.getElementsByTagName("input");
        // 全选
        function func1() {
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }

        // 取消
        function func2() {
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked = false;
            }
        }

        // 反选
        function func3() {
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked = !inputs[i].checked;
            }
        }

    </script>


</body>
</html>

全选、取消、反选

全选、取消、反选

// onfocus和onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="text" id="show" value="用户名/手机号/邮箱" onfocus="begin()" onblur="end()">
    
    <script>
        var content = document.getElementById("show");
        function begin() {
            if (content.value == "用户名/手机号/邮箱"){
                content.value = "";
            }

        }

        function end() {
            var result = content.value;
            if (!result.trim()){
                content.value = "用户名/手机号/邮箱"
            }

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

搜索框

搜索框

// onsubmit事件 可以用作匹配验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="注册">
</form>

<script>


var ele = document.getElementById("form1");
ele.onsubmit = function (e) {
    alert("验证失败");
    // return false;
    e.preventDefault();
}
    
</script>

</body>
</html>

表单验证

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #txt{
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <div id="txt">啤酒饮料矿泉水，花生瓜子八宝粥</div>

    <script>
        setInterval(function () {
            var txt = document.getElementById('txt').innerText;
            var a = txt.charAt(0);
            var b = txt.substring(1, txt.length);
            var new_txt = b+a;
            document.getElementById('txt').innerText = new_txt;
        }, 500)
    </script>
</body>
</html>

跑马灯

nx跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select name="sx" id="provinces">
        <option value="">省份</option>
    </select>

    <select name="sx" id="citys" size="1">
        <option value="">城市</option>

    </select>

    <script>
        // 数组
        var data = {"陕西":["西安","咸阳","宝鸡"],"山西":["太原","晋城","大同"]};
        // 通过ID取到对应标签
        var pro_ele = document.getElementById("provinces");
        var city_ele = document.getElementById("citys");

        // 遍历  i 为 键
        for (var i in data){
            // 创建option标签
            var pro_child = document.createElement("option");
            // 赋值
            pro_child.innerHTML = i;
            // 父级追加
            pro_ele.appendChild(pro_child)
        }

        // 怎样获取到选择的省份
        // 绑定onchange事件
        pro_ele.onchange = function () {
            // 如果下一次进入 默认清空内容  保留第一个option
            city_ele.length = 1;
            // this.selectedIndex代指选中索引
            // this.options获取select标签的option标签数组
            var province = this.options[this.selectedIndex].innerHTML;  // 取到选中的文本
            // 索引取值
            var citys = data[province];
            for (var i in citys){
                var city_child = document.createElement("option");
                city_child.innerHTML = citys[i];
                city_ele.appendChild(city_child);
            }

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

俩级联动

二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0;
        }

        .div1{
            height: 1500px;
            background-color: red;
        }

        .div2{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: gray;
            opacity: 0.6;
        }

        .div3{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        /* display:none即隐藏内容 */
        .xs{
            display: none;
        }
    </style>
</head>
<body>

<div class="div1">
    <button onclick="show()">显示</button>
    <br>
    <p>Hello World</p>
</div>

<div class="div2 xs"></div>

<div class="div3 xs">
    <button onclick="off()">取消</button>
</div>

<script>
    var ele_show1 = document.getElementsByClassName("div2")[0];
    var ele_show2 = document.getElementsByClassName("div3")[0];
    function show() {
        // 删除class带有xs的属性,即解除限制
        ele_show1.classList.remove("xs");
        ele_show2.classList.remove("xs");
    }

    function off() {
        // 添加class名字
        ele_show1.classList.add("xs");
        ele_show2.classList.add("xs");
    }

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

模态对话框

模态对话框

// 解除事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div class="outer" onclick="func2()">
    <div class="inner"></div>
</div>


<script>

    var ele=document.getElementsByClassName("inner")[0];
    ele.onclick= function (e) {
        alert("I am inner!");
        // 解除事件传播
        e.stopPropagation()
    };


    function func2() {
        alert("I am outer!")
    }
</script>
</body>
</html>

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>输入一个0到9的数字</p>
<input id="numb">
<button onclick="func1()">提交验证</button>
<p id="ret"></p>

<script>
    function func1() {
        var x, text;
        x = document.getElementById("numb").value;
        console.log(x);
        if (isNaN(x) || x < 0 || x > 10){
            text = "输入错误";
            return false
        }else {
            text = "输入正确";
        }
        document.getElementById("ret").innerHTML = text;
    }
</script>

0-9

0-9

posted @ 2017-01-19 16:27 红领巾下的大刀疤阅读(194) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

红领巾下的大刀疤

Only you become stronger, to protect the people I want to protect...

DOM & BOM

BOM

1、了解

2、window对象

3、window对象方法

4、History

5、location

DOM

1.简介

2.节点类型

3.节点关系

4.节点属性

5.节点操作

6.事件

7.实例

公告