JavaScript操作BOM、DOM对象

目录

BOM模型

 window对象的常用属性

window对象的常用方法

confirm()确认取消方法

 open()方法

 history对象 —常用方法

location对象

location和history对象的应用

DOM对象

Document对象 

Document对象应用2-2

Document对象的常用方法2-1

 Document对象的常用方法2-2

JavaScript内置对象

Date对象

---

BOM模型

        BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

        BOM可实现功能

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口的大小

页面的前进、后退

        整个BOM的核心

 window对象的常用属性

属性名称	说      明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

window.属性名= "属性值"

window.location="https://www.baidu.com" ;     表示跳转到百度首页

window对象的常用方法

方法名称	说      明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

confirm()确认取消方法

        confirm()：将弹出一个确认对话框

        confirm()与alert ()、 prompt()区别

alert( ) ：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( ) ：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回 null ，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( ) ：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回 true ，单击“取消”按钮返回 false ，因此与 if-else 语句搭配使用

function goBaidu() {
            // 使用window.location更改窗口中的url信息，实现页面跳转。
            window.location = "http://www.baidu.com";
            location = "http://www.baidu.com";
            location.href = "http://www.baidu.com";
        }
        function goBaidu2() {
                window.open("http://www.baidu.com");
        }

 open()方法

属性名称	说      明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes | no  |1 | 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes | no  |1 | 0	是否显示滚动条。黙认是yes
location=yes | no  |1 | 0	是否显示地址地段。黙认是yes
status=yes | no  |1 | 0	是否添加状态栏。黙认是yes
menubar=yes | no  |1 | 0	是否显示菜单栏。黙认是yes
resizable=yes | no  |1 | 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes | no  |1 | 0	是否显示标题栏。黙认是yes
fullscreen=yes | no  |1 | 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

 history对象 —常用方法

名称	说      明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

location对象

常用属性

名称	说      明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说      明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用

DOM对象

Document对象 

常用属性

名称	说      明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法：

document.referrer

document.URL

Document对象应用2-2

判断页面是否是链接进入

自动跳转到登录页面

var preUrl=document.referrer;  //载入本页面文档的地址

if(preUrl==""){ 

      document.write("<h2>您不是从领奖页面进入，5秒后将自动

                         跳转到登录页面</h2>");

      setTimeout("javascript:location.href='login.html'",5000);

}

Document对象的常用方法2-1

Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。

第二点：document 它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象
 

名称	说      明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

//document.getElementsByName();是根据 指定的 name 属性查询返回多个标签对象集合

// 这个集合的操作跟数组 一样 // 集合中每个元素都是 dom 对象

// 这个集合中的元素顺序是他们在 html 页面中从上到下的顺

// document.getElementsByTagName("input");

// 是按照指定标签名来进行查询并返回集合

// 这个集合的操作跟数组 一样

// 集合中都是 dom 对象

// 集合中元素顺序 是他们在 html 页面中从上到下的顺序

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名 注： document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用

getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

alert("结算总结为："+total.toFixed(2)); //保留小数点两位数；

 Document对象的常用方法2-2

1.动态改变层、标签中的内容

document.getElementById("book"). innerHTML="现象级全球畅销书";

2.访问相同 name的元素

var aInput=document.getElementsByName("season");

        var sStr="";

        for(var i=0;i<aInput.length;i++){

            sStr+=aInput[i].value+"&nbsp;&nbsp;";

        }

        document.getElementById("replace").innerHTML=sStr;

3.访问相同标签的元素  

var aInput=document.getElementsByTagName("input");

var sStr="";

for(var i=0;i<aInput.length;i++){

       sStr+=aInput[i].value+"&nbsp;&nbsp;";

}

document.getElementById("replace").innerHTML=sStr;

       

JS中的innerHTML，innerText，value的区别

一、区别
innerHTML
在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。

innerTEXT
打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。

value
显示双引号中的全部内容，显示标签，标签无效。

二、举例

例一
1、innerHTML
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<p id="demo">my first demo</p>
</body>
<script>
    document.getElementById("demo").innerHTML="<b>hello world</b>"
</script>
</html>

2、innerTEXT
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<p id="demo">my first demo</p>
</body>
<script>
    document.getElementById("demo").innerText="<h1>My First JavaScript</h1>";
</script>
</html>


3、value
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<p id="demo">my first demo</p>
<input id="input" type="text">
</body>
<script>
    document.getElementById("input").value="<b>hello</b>"
</script>
</html>

代码演示：

<script type="text/javascript">
    function calc() {
        //获取所有name为price的单价集合
        let elePriceArr = document.getElementsByName("price");
        //获取所有name为amount的数量集合
        var eleAmountArr = document.getElementsByName("amount");
        //累计总金额
        let total = 0;
        for (let i = 0; i < elePriceArr.length; i++){
            var price = parseFloat(elePriceArr[i].value);
            var amount = parseInt(eleAmountArr[i].value);
            total += price * amount;
        }
        alert("结算总结为：" + total.toFixed(2));
        document.getElementById("totalPrice").innerText = total.toFixed(2);
    }
</script>

JavaScript内置对象

Array ：用于在单独的变量名中存储一系列的值

String ：用于支持对字符串的处理

Math ：用于执行常用的数学任务，它包含了若干个数字常量和函数

Date ：用于操作日期和时间

Date对象

        使用Date对象获得时、分、秒

        var 日期对象=new Date(参数)

        参数格式：MM  DD,YYYY,hh:mm:ss

Date对象的方法

常用方法

方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

Math对象

方法	说 明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

定时函数2-1

清除函数

 //让时间自动走+启停开关 

<body>
    <input type="button" value="停止" onclick="isGo(this)">
    <div id="showDate"></div>
</body>
<script type="text/javascript">
    function isGo(btn) {
        if (btn.value == "停止") {
            btn.value = "开启";
            clearInterval(myIntervar);
        } else {
            btn.value = "停止";
            myIntervar = setInterval("getDate()", 1000);
        }
    }
    function getDate() {
        let zhou = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        let today = new Date();
        let shouDateTime = "现在是：";
        shouDateTime += today.getFullYear() + "-";
        shouDateTime += (today.getMonth() + 1) > 10 ? (today.getMonth() + 1) : "0" + (today.getMonth() + 1) + "-";
        
        shouDateTime += ("0" + (today.getDate())).slice(-2) + "-";  //slice 方法搜一下？？
        shouDateTime += today.getHours() + ":";
        shouDateTime += today.getMinutes() + ":";
        shouDateTime += today.getSeconds() + " ";
        // shouDateTime += today.getUTCMilliseconds() + " ";
        shouDateTime += zhou[today.getDay()];
        //打印到页面上
        // document.write(shouDateTime);
        document.getElementById("showDate").innerHTML = shouDateTime;
    }
    getDate();
    var myIntervar = setInterval("getDate()", 1000);
    // setInterval("getDate()",1000);
    // setTimeout("getDate()",1000);
</script>

//石头剪刀布小游戏

  <title>石头剪刀布</title>
    <script type="text/javascript">
        function bijiao(btn) {
            let player = "";
            let eles = document.getElementsByName("player");
            for (let i = 0; i < eles.length; i++) {
                if (eles[i].checked) {
                    player = eles[i].value;
                }
            }
            let arr = ["石头", "剪刀", "布"];
            let pc = arr[(Math.floor(Math.random()*1000)%3)];
            //比较
            let result = "平局";
            if (player!=pc){
                switch (player+pc) {

                    case "石头剪刀":
                    case "剪刀布":
                    case "布石头":
                        result="你赢了！";
                        break;
                        default:
                            result="你输了！";
                }
            }
            let msg ="玩家出拳："+player+"<br />电脑出拳："+pc+"<br />猜拳结果："+result;
            document.getElementById("show").innerHTML=msg;
            btn.value="再来一次！";

        }
    </script>
</head>
<body>
<input type="radio" name="player" value="石头" checked/>石头
<input type="radio" name="player" value="剪刀"/>剪刀
<input type="radio" name="player" value="布"/>布

<input type="button" value="请出拳：" onclick="bijiao(this)">
<div id="show"></div>

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法

stringObject.slice(start,end)

参数	描述
start	要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end	紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

返回值

一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

 操作DOM

DOM ： Document Object Model （文档对象模型）

 

节点和节点关系

访问节点 

使用 getElement 系列方法访问指定节点

getElementById ()

getElementsByName ()

getElementsByTagName ()

根据层次关系访问节点

  根据层次关系访问节点2-1

        节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

根据层次关系访问节点2-2

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

节点信息

        unodeName：节点名称

        unodeValue：节点值

        nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9