Fork me on GitHub

JavaScriptBOM操作

发表于 | 更新于: | 分类于 | | 本文总阅读量 次
字数统计: 3.5k | 阅读时长 ≈ 14

JavaScript BOM 操作

BOM（browser object model ） 浏览器对象模型

👉 浏览器 对象 模型

window 对象方法

window 是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个 接口，又是ECMAScrip 规定的 Global对象 === 全局对象

♥ 所有的全局变量和全局方法都被归在 window 上了。

window.alert(警示框)

功能：弹出警示框

1
alert('弹出来')

window.confirm (‘消息对话框’);

功能：显示一个带有指定消息和 OK 及取消按钮的消息对话框

返回值： 布尔型 ，确定是 true， 取消是 false

1
2
3
4
5
6
7
8
9
// 获取按钮
var btn = document.getElementById('btn');
btn.onclick = function () {
     // 提示文字太长，可以使用 /n 换行
    var result = window.confirm('您确定要删除吗');
    if (result){
        // 获取要隐藏的元素 ID ，然后执行 隐藏样式
        document.getElementById('box').style.display = 'none';
    }

window.prompt( text1,text2 )

参数说明：

text1:要做对话框中显示的纯文本（而不是html格式的文本）

text2: 默认的输入文本

返回值：如果用户单击提示框的取消按钮，则返回 null

​ 如果用户单击提示框的确定按钮，则返回 输入字段当前显示的文本

1
2
3
// 弹出输入框
var message = prompt('请输入您的星座',"天平座");
console.log(message);

window.Open( 1，2 ，3)

功能：打开一个新的浏览器窗口或者查找一个已命名的窗口

参数说明：

pageURL： 子窗口路径

name: 子窗口句柄 （name 声明了新窗口的名称，方便后期通过对子窗口进行引用）

paramenters: 窗口参数（各参数用逗号分隔）

​ width/height left/top toolbar(是否显示浏览器的工具栏)

​ menubar 是否显示菜单栏

​ scrillbars 是否显示滚动条

​ location 是否显示 地址字段

​ status 是否添加状态栏

1
window.open("wwww.baidu.com","baidu	","......");

window.close(关闭当前窗口)

1
window.close();

setTimeout 定时器

超时调用

语法：setTimeout( code,millisec)

功能：在指定的毫秒数后调用函数或计算表达式

参数说明：

​ code：调用的函数或要执行的JavaScript代码串

​ millsec: 在执行代码前需等待的毫秒数

​ setTimeout() 只执行code一次，如果要多次调用，可以让code自身再次调用 setTimeout，通过这种方法可以实现 间隙调用相同的功能

返回值： 返回一个ID值，通过它取消超时调用

1
2
3
4
5
6
7
8
9
10
// 匿名函数调用
setTimeout(function () {
    alert('超时调用')
},2000);

// 自定义函数
var 自定义函数fnCall = function () {
    alert('超时调用');
}
setTimeout(fuCall, 3000);

清除超时调用

语法：clearTimeout( id_of_settimeout )

功能：取消由setTimeout() 方法设置的timeout

参数说明：

id_of_settimeout ： 由setTimeout() 返回的ID值，该值标识要取消的延迟执行代码块

1
2
3
4
5
6
7
 // 自定义函数
var timeout1 =  setTimeout(function () {
     alert('超时调用')
 },2000);
 
 // 清除定时器
 clearTimeout(  timeout1 )

案例

1
2
3
<input type="button" value="删除">
<input type="button" value="取消删除">
<div>点击"删除"按钮后，里面的内容将在3秒钟后消失；<br/><br/>如点击了"删除"后又不想删除内容，请在点击"删除"按钮3秒之内点击"取消删除"按钮即可</div>
1
div{width:400px;height:120px;margin-top:50px;border:2px solid gray;padding:10px;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 获取 俩个按钮
var btn1 = document.getElementsByTagName('input')[0];
var btn2 = document.getElementsByTagName('input')[1];
// 要处理的元素
var text = document.getElementsByTagName('div')[0];
//  定时器变量
var sum ;
// 点击删掉后 3秒后删掉
btn1.onclick = function () {
    // 创建定时器并且命名
    sum = setTimeout(function () {
        text.innerHTML = '';
    },3000)
}
// 点击取消按钮后，则立马 清除指定的定时器
btn2.onclick = function(){
    clearTimeout(sum);
} ;

间歇调用

语法：setInterval( code,millisec );

功能：每隔指定的事件执行一次代码

参数说明：

​ code ： 要调用的函数或要执行的代码串

​ millisec: 周期性执行或调用code之间的时间间隔，以毫秒计数

1
2
3
4
5
// 间隙调用
setInterval(function () {
    // 每隔十秒钟调用一次,无限循环
    console.log("你好");
}, 1000)

清除间隙调用

语法: clearInterval( id_of_setinterval )

功能：取消由setInterval () 方法设置的interval

参数说明：

​ id_of_setinterval : 由setInterval () 返回的ID 值

1
2
3
4
5
6
7
8
9
10
11
// 间隙调用
var intervalId = setInterval(function () {
    // 每隔十秒钟调用一次
    console.log("你好");
}, 1000)

// 10秒后停止打印
setTimeout(function () {
    // 清除间隙调用,填写该变量名就好了
    clearInterval(intervalId)
})

综合案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 使用超时调用实现，间隙调用功能
var num = 1,
    max = 10,
    timer = null;

// 封装函数
function inCreamentNum() {
    // 一秒后打印一次 num
    console.log(num);
    // num 递增
    num++;
    // 判断 num 是否小于max
    if (num <= max) {
        // true ,再次调用自身函数
        setTimeout(inCreamentNum, 1000);
    } else {
        // false，清除自身定时器
        clearTimeout(timer);
    }
};
// 调用函数
timer = setTimeout(inCreamentNum, 1000);

编程练习

“☆☆☆今日特卖☆☆☆ ”和“★★★今日特卖★★★”这两个文本每0.5秒互相切换一次

任务

第一步：先获取放置文本的div文本框对象，用变量进行接收

第二步：自定义一个变量，用来接收记录闪烁的值，初始值是0

第三步：设置定时器，每500毫秒执行一下定时器里面的脚本

第四步：定时器的脚本如下：

（1） 当闪烁变量的值是0时，闪烁变量的值设置为1，div里面的内容设置为：’☆☆☆今日特卖☆☆☆’

（2）当闪烁变量的值是1时，闪烁变量的值设置为0，div里面的内容设置为：’★★★今日特卖★★★’

1
2
<h3>会闪烁的文字</h3>
<div id="text"> </div>
1
2
3
4
5
6
7
8
div{
               width:200px;
               height:200px;
               line-height:200px;
               border:2px solid gray;
               text-align:center;
               color:red;
           }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var tex = document.getElementById('text');
// 判断的变量值
var b1 = 0;
setInterval(function () {
    // 判断：如果b1是1 ，则执行，然后把b1 改为 0 ，下次判断就会跳另外一个判断
    if (b1 == 1){
        b1 = 0;
        tex.innerText = '★★★今日特卖★★★';
    } else {
        // 如果为0; 则b1改为1 。再次跳到另外一个判断，以此无线循环
        b1 = 1;
        tex.innerText = '☆☆☆今日特卖☆☆☆';
    };
},500)

location 窗口对象属性

location 对象提供了与当前窗口中加载的文档有关的信息，还提供了导航的功能，它既是window对象的属性，也是docment对象的属性。

location .href

语法：location href

功能：返回当前加载页面的完整URL

说明： location .href 与window.location.href 等价

1
2
3
console.log(window.location.href);

//http://localhost:63342/Desktop/%E5%AD%A6%E4%B9%A0%E6%96%87%E4%BB%B6/01-%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/05-JS%E5%9F%BA%E7%A1%80/%E6%B5%8B%E8%AF%95%E4%BB%A3%E7%A0%81%E3%80%81.html?_ijt=15fn5hgq4kmr95ihpv7p3eb3e2

location .hash

语法：location .hash

功能：返回URL中的hash（#号后 跟 零或多个字符），如果不包含则返回空字符串。

注：能实现锚链接 效果

1
console.log(window.location .hash);

location .host

语法：location .host

功能：返回服务器名称和端口号（前提是有这个东东）

location .hostname

语法：location .hostname

功能：返回不带端口号的服务器名称

location .pathname

语法：location .pathname

功能：返回URL中的目录和文件名

location .port

语法：location .port

功能：返回URL中指定的端口号，如果没有，返回空字符串

location .portocol

语法：location .portocol

功能：返回页面使用的协议

语法：location .search

功能：返回URL的查询字符串，这个字符串以问号开头

location 浏览器对象属性

location . relace()

功能：重新定向URL

说明：使用location.relace 不会在历史记录中生成新记录

location . reload()

功能：重新加载当前显示页面

说明：

​ location . reload() 有可能从缓存中加载

​ location . reload( true) 从服务器重新加载

注：一般放在页面最后面。

1
2
3
4
docment.getElementById('btn').onclick = function(){
    location . reload( true)；
    // 从服务器重新加载页面
}

history 对象保存了用户在浏览器中访问页面的历史记录

history .back()

功能：回到历史记录的上一步

说明：相当于使用了history .go(-1)

1
2
3
4
5
6
7
8
// 点击btn 按钮时，回到历史记录的上一步
var btn = docment.getElementById("btn");
btn.oncclick = function(){
    history .back();
    
    // 另外一种写法，可以后退N步
    // history .go(-1)
}

history .forward()

功能：回到历史记录的下一步

说明：相当于使用了 history .go( 1 )

1
2
3
4
5
6
7
8
9
// 点击btn 按钮时，回到历史记录的下一步
var btn = docment.getElementById("btn");
btn.oncclick = function(){
    
    history .forward();
    
    // 另外一种写法，可以前进 1 
    // history .go( 1)
}

Screen 显示器对象及方法

Screen对象包含有关客户端显示屏幕的信息

Screen . availWidth()

功能：返回可用的屏幕宽度

说明：获取到的是除了任务栏之外的内容。

1
2
3
console.log("获取显示器屏幕的宽度" + screen.availWidth);    

console.log("获取浏览器的高度" + window.innerWidth);

Screen . availHeight()

功能：返回可用的屏幕高度

说明：获取到的是除了任务栏之外的内容。

1
2
3
console.log("获取显示器屏幕的高度" + screen.availHeight);

console.log("获取浏览器的高度" + window.innerHeight);

用来识别浏览器名称/版本/引擎以及操作系统等信息的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var explorer = navigator.userAgent;
alert(explorer);

/* 
PC端---返回值
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/74.0.3729.169 Safari/537.36
移动端---返回值
    Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Version/11.0 Mobile/15A372 Safari/604.1
    
    Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T)
    AppleWebKit/537.36 (KHTML, like Gecko)
    Chrome/74.0.3729.169 Mobile Safari/537.36
    
    Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012)
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/74.0.3729.169 Mobile Safari/537.36
*/

封装检测浏览器类型函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 检测浏览器类型
function getBrowser() {
    // 获取 userAgent 属性, 并且转换为 小写字母
    var explorer = navigator.userAgent.toLowerCase(),browser;
    console.log(explorer);
    // 判断 是什么打开的页面
    if (explorer.indexOf("msie") > -1) {
        browser = 'IE';
    } else if (explorer.indexOf("chrome") > -1) {
        browser = 'chrome';
    } else if (explorer.indexOf('opera') > -1) {
        browser = 'opera';
    } else if (explorer.indexOf('safari') > -1) {
        browser = 'safari';
    }
    return browser;
}

// 接收返回值:  调用getBrowser函数
var explorer = getBrowser();
// 输出
console.log("您当前使用的是:" + explorer + "浏览器");

JavaScript BOM 节点操作

创建节点

docment.write()

1
2
 document.write('<h1>111111</h1>')
// 缺陷严重,会删掉其他元素

create系列创建节点的方法

docment.createElement() 标签节点

docment.createTextNode() 文本内容节点

1
2
3
4
5
6
7
8
9
10
// 获取 ID
var ul = document.getElementById('ul');
// 创建 li
var li = document.createElement('li');
// 创建 文本内容
var txt = document.createTextNode('Item');
// 创建的li标签中，”添加“ 上 txt
li.appendChild(txt);
// 目标元素中，"添加” 上 新创建的li标签
ul.appendChild(li);

docment.createDocumentFragment() 文档片段

docment.createComment() 注释节点

create系列案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 创建注释
var comment = document.createComment("A Comment");

// 创建 代码片段
var fragment = document.createDocumentFragment();

// 获取 ID
var ul = document.getElementById('ul');
// 创建 li变量 = 式接收值
var li = null;

// 循环创建 li 标签
for (var i = 0; i < 3; i++) {
    // 循环创建了 li 标签
    li = document.createElement('li');
    // li 标签中，填充 文本内容
    li.appendChild(document.createTextNode("Item" + (i + 1)));
    // 代码片段,接收 li
    fragment.appendChild(li);
}
// ul，每一次循环后，把 接收的代码片段 填充进去;
ul.appendChild(fragment);

// 注释，插入到 某个标签前面
document.body.insertBefore(comment,ul);

高效率创建节点方法

innerHTML

用来设置或获取当前标签的起始和结束里面的内容

限制问题：

​ 字符串的最左边不能出现空白，IE6~8会自动移除掉它

​ 大多数浏览器不会对script 标签进行脚本执行操作

​ 不能单独创建meta,style.link 等元素，一定要在前面加上一些字符

​ innerHTML不会执行script中脚本的语句。

1
2
3
4
5
6
7
8
9
10
// <div id="box"></div>

var content = document.getElementById('box');
      var str = "<p>dioqwj djlasdasnd,m oida sdzcjas <span>HEkjhdq</span></p>"
          + "<ul>"
          + "<li>itme1 </li>"
          + "<li>itme2 </li>"
          + "<li>itme3 </li>"
          + "</ul>";
      content.innerHTML = str;

outerHTML

返回调用它的元素及所有的子节点的HTML标签

会覆盖原先父元素下的所有元素

outerHTML获取到的是整个标签，而不仅限于标签内部的内容。

1
2
3
元素名.outerHTML   // 获取

元素名.outerHTML  = " <p>w h hjwahdkasd</p>";  // 填充内容

innerText

设置或获取位于对象起始和结束标签内的文本

outerText

遍历节点

————-第1套API 节点查找————-

获取第一个子节点

firstChild

获取最后一个子节点

lastChild

获取父节点

parentNode

ownerDocument

获取下一个兄弟节点获取

nextSibling

获取上一个兄弟节点获取

previousSibling

获取任意一个子节点

childNodes[1]

childNodes.itme(1)

检查当前节点是否存在子节点

hasChildNodes( )

注释：元素与元素之间的空格，会被视为一个文本节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 页面打印文档结构
	// 存储变量
       var s = "";
       function travel(space, node) {
           // 如果当前节点是标签，不是空的，就拼接字符串
           if (node.tagName) {
               s += space + node.tagName + "<br/>";
           }
           var len = node.childNodes.length;
           for (var i = 0; i < len; i++) {
               travel(space + "*", node.childNodes[i])
           }
       }
       travel("", document);
       document.write(s);

————-第2套API 节点查找 IE8以下不支持————-

firstElementChild 第一个字节点

lastElementChild 最后一个字节点

nextElementSibling 下一个兄弟节点

previusElementSibling 上一个兄弟节点

Children[1] 获取任意子节点

childElementCount 返回当前节点的所有子节点

1
2
3
4
5
6
var box = document.getElementById('box');
// 循环遍历 节点
for( var i = 0; len = box.chidElementCount; i<len; i++ ){
				    // 打印当 所有子节点
				    console.log(box.children[i]);
}

类数组对象 NodeList

NodeList 是一种类数组对象，用于保存一组有序的节点

可以通过方括号语法来访问NodeList的值，有item 方法与length 属性

它并不是Array 的实例，没有数组对象的方法