JavaScript之 BOM 与 DOM

时间:2021-03-12 19:26:29

1. JavaScript 组成

JavaScript之 BOM 与 DOM

2. DOM、DOCUMENT、BOM、WINDOW 区别

DOM 是为了操作文档出现的 API , document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window是其的一个对象。
BOM 是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器内的内容进行操作。

JavaScript之 BOM 与 DOM

归DOM管的:

E区(由web开发人员写出来的一个文件夹,里面有index.html,css,js 部署到服务器上,我们通过浏览器的地址栏输入URL然后回车将这个document 加载到本地,浏览,右键查看源代码等)。

归BOM管的:

A区(浏览器的标签页、地址栏、搜索栏、书签栏、窗口放大还原关闭按钮,菜单栏等)
B区(浏览器右键菜单)
C区(document加载时的状态栏,显示http状态码等)
D区(滚动条)

2.1 BOM

BOM 是 Browser Object Model,浏览器对象模型。
BOM是为了控制浏览器的行为出现的接口。比如跳转到另一个页面、前进、后退等等,程序可能还需要获取屏幕的大小之类的参数。

location.href='https://www.cnblogs.com/';

这个 location 就是 BOM 里的一个对象。

2.2 WINDOW

window 也是 BOM 的一个对象,通过这个对象可以获取 浏览器 的窗口位置、确定窗口大小、弹出对话框等等。
一些 window 常用的方法:

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

JavaScript之 BOM 与 DOM

2.2.1 WINDOW 的子对象

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

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

screen 对象
屏幕对象,不常用

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

history 对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

常用属性和方法:

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

弹出框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:

alert('吃了吗?')

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

confirm('are you ok?');

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

这里想起来一个计算 BMI 的例子:

var height = parseFloat(prompt('请输入身高(m):'));
var weight = parseFloat(prompt('请输入体重(kg):')); var bmi = weight / height**2; if (bmi < 18.5) {
    alert('过轻');
} else if (bmi < 25) {
    alert('正常');
} else if (bmi < 28) {
    alert('过重');
} else if (bmi < 32) {
    alert('肥胖');
} else {
    alert('严重肥胖');
}

 计时相关

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

语法:

var t=setTimeout("JS语句",毫秒)

示例:

JavaScript之 BOM 与 DOM

clearTimeout()

语法:

clearTimeout(setTimeout_variable)

示例:

JavaScript之 BOM 与 DOM

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

setInterval("JS语句",时间间隔)

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:

clearInterval(setinterval返回的ID值)

例子:

JavaScript之 BOM 与 DOM

其他所有对象方法:

window.close(); //关闭窗口
window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本
window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
window.prompt("What's your name?", "Default"); //提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
window.status //可以使状态栏的文本暂时改变
window.defaultStatus //默认的状态栏信息,可在用户离开当前页面前一直改变文本
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
window.clearTimeout("ID"); //取消还未执行的暂停,将暂停ID传递给它
window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
window.clearInterval("ID"); //取消时间间隔,将间隔ID传递给它
window.history.go(-1); //访问浏览器窗口的历史,负数为后退,正数为前进
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //可以查看历史中的页面数  
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
createPopup() 创建一个 pop-up 窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout(方法,秒数)    在指定的毫秒数后调用函数或计算表达式。
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定时器传参数

2.3 DOM

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

HTML DOM树

JavaScript之 BOM 与 DOM

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

  • 文档节点(document对象):代表整个文档
  • 元素节点(element 对象):代表一个元素(标签)
  • 文本节点(text对象):代表元素(标签)中的文本
  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  • 注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML:

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

2.3.1 对象属性

document.body    //提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
document.cookie    //返回与当前文档有关的所有 cookie。
document.title    //返回文档标题等价于HTML的title标签
document.domain    //返回当前文档的域名。
document.URL    //设置URL属性从而在同一窗口打开另一网页
document.referrer    //返回载入当前文档的文档的 URL。
document.lastModified    //返回文档被最后修改的日期和时间。

 2.3.2 查找标签

(1)直接查找

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

JavaScript之 BOM 与 DOM

(2)间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

parentElement 通过子标签获取父标签

语法:

子标签.parentElement

示例:

JavaScript之 BOM 与 DOM

children  通过父标签获取所有子标签

语法:

父标签.children

JavaScript之 BOM 与 DOM

firstElementChild  通过父标签获取第一个子标签

语法:

父标签.firstElementChild

JavaScript之 BOM 与 DOM

lastElementChild  通过父标签获取最后一个子标签

语法:

父标签.lastElementChild

JavaScript之 BOM 与 DOM

nextElementSibling 通过该元素获取下一个兄弟元素

previousElementSibling  通过该元素获取上一个兄弟元素

语法:

标签.nextElementSibling       // 通过该元素获取下一个兄弟元素
标签.previousElementSibling // 通过该元素获取上一个兄弟元素

JavaScript之 BOM 与 DOM

2.4 节点操作

(1)创建节点

语法:

createElement(标签名)

示例:

var p4Ele = document.createElement('p');

(2)添加节点

追加一个子节点(作为最后的子节点)

语法:

父标签.appendChild(新标签)

示例:

JavaScript之 BOM 与 DOM

把增加的节点放到某个节点前面

语法:

父标签.insertBefore(新标签, 某个节点)

JavaScript之 BOM 与 DOM

(3)删除节点

获得要删除的元素,通过父元素调用该方法删除。

语法:

父标签.removeChild(要删除的节点)

JavaScript之 BOM 与 DOM

(4)替换节点

语法:

父标签.replaceChild(newnode, 某个节点);

JavaScript之 BOM 与 DOM

(5)获取值操作

语法:

elementNode.value

适用于以下标签:

  • .input
  • .select
  • .textarea
// 获取 input 值
var i1Ele = document.getElementById('i1');
i1Ele.value;
输出:"hukey" // 获取 select 值
var s1Ele = document.getElementById('s1');
s1Ele.value;
输出:"1" // 获取 textarea 值
var t1Ele = document.getElementById('t1');
t1Ele.value
输出:"123123123123"

2.5 事件

(1)常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。 onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。 onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

(2)绑定方式

绑定方式-1

<div id="d1" style="background-color: green" onclick="changeColor(this)">点我变色</div>

<script>
    function changeColor(tsh) {
        tsh.style.backgroundColor='red';
    }
</script>

绑定方式-2

<div id="d2">点我</div>
<script>
    var d2Ele = document.getElementById('d2');
    d2Ele.onclick = function () {
        this.innerText='呵呵';
    }
</script>

2个示例:

<label>
    <input id="d1" type="text" value="请输入关键字" onfocus="myfo()" onblur="myblur()">
</label> <script>
    function myfo() {
        var divEle = document.getElementById('d1');
        if (divEle.value === "请输入关键字") {
            divEle.value="";
        }
    }
    function myblur() {
        var divEle = document.getElementById('d1');
        if (divEle.value === "") {
            divEle.value = '请输入关键字';
        }
    }
</script>

搜索框示例

<select id="s1">
    <option>请选择省份:</option>
</select> <select id="city">
    <option>请选择城市:</option>
</select> <script>
    data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    var p = document.getElementById('s1');
    var c = document.getElementById('city');
    for (var i in data) {
        var optionEle = document.createElement('option');
        optionEle.innerHTML=i;
        p.appendChild(optionEle);
    }
    p.onchange = function () {
        var pro = (this.options[this.selectedIndex]).innerHTML;
        var citys = data[pro];
        c.innerHTML = '';
        for (var i=0; i< citys.length; i++) {
            var option_city = document.createElement("option");
            option_city.innerHTML = citys[i];
            c.appendChild(option_city);
        }
    } </script>

select联动

参考链接:

https://blog.csdn.net/qq877507054/article/details/51395830
https://www.cnblogs.com/liwenzhou/p/8011504.html