前端之BOM和DOM

JavaScript分为ECNAScript，BOM， DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

BOM

window对象

所有的浏览器都支持window对象，它表示浏览器接口。

如果文档包含框架（frame或ifram标签），浏览器回味HTML文档创建一个window对象，并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法：

• window.innerHeight： 浏览器窗口内部高度

• window.inner 浏览器窗口内部宽度

• window.open(): 打开新窗口

• window.close()： 关闭当前窗口

window的子对象

navigator对象

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

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

screen对象

屏幕对象，不常用。

一些属性：

• screen.availwidth : 可用的屏幕宽度

• screen.availHeight：可用的屏幕高度

history对象

history 对象保存着用户上网的历史记录,使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数， 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)。 看例子:

history.forward() // 前进一页
history.back() // 后退一页
 history.go(-1); //后退一页
history.go(1); //前进一页 
history.go(2); //前进两页 

location对象

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

常用属性和方法：

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

弹出框

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

警告框

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

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

语法：

alert("你看到了吗？");
​
​
网页显示：你看到了吗？

 

确认框（了解即可）

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

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

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

语法：

confirm("你确定吗？")
​
网页提示：你确定吗？

 

提示框（了解即可）

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

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

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

语法：

prompt("请在下方输入","你的答案")
请在下方输入
`你的答案`

计时相关

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

 

setTimeout()

语法：

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

 

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

clearTimeout()

语法：

clearTimeout(setTimeout_variable)
​

 

举个例子：

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

 

setInterval()

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

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

语法：

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

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

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

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

语法：

clearInterval(setinterval返回的ID值)

 

举个例子：

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

查询字符串参数

虽然通过上面的属性可以访问到 location 对象的大多数信息，但其中访问 URL 包含的查询字符 串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的所有内容，但却没有办法逐个 访问其中的每个查询字符串参数。为此，可以像下面这样创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象:

function getQueryStringArgs() {    // ?username=mjj&pwd=18    // 1.取得查询字符串并去掉开头的问号    var qs = location.search.length > 0 ? location.search.substring(1) : "";    // 保存数据的对象    var args = {};    // 2.取得每一项    var items = qs.length ? qs.split('&'):  [];    var item = null,name =  null,value = null;    // 3.逐个将每一项添加到args对象中    for(var i = 0; i < items.length; i++){        item = items[i].split('=');        name = decodeURIComponent(item[0]);        value = decodeURIComponent(item[1]);        if (name.length) {            args[name]  = value;        }    }    return args;}//假设地址查询参数为?name=zhangsan&age=18//另外还要考虑?,=,&编码的情况var args = getQueryStringArgs();console.log(args);//{name: "zhangsan", age: "18"}

位置操作

href属性

使用location对象可以通过很多方式来改变浏览器的位置.首先,也是最常用的方式通过href属性将其传递一个url

栗子:2秒之后跳转到小猿圈的web页面

setTimeout(function(){
    location.href = 'https://www.apeland.cn/web';},2000)

当通过上述任何方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通 过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace()方法。这个方法 只接受一个参数，即要导航到的 URL;结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记 录。在调用 replace()方法之后，用户不能回到前一个页面,

栗子:2秒之后跳转网页但不会产生历史记录

setTimeout(function(){    location.replace('https://www.apeland.cn/web');},2000)

DOM

DOM{Document（文档） Object（对象） Model（模型）}是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML树

 

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

• 文档节点（document对象）：代表整个文档

• 元素节点（element对象）：代表一个元素（标签）

• 文本节点（text对象）：代表元素标签中的文本

• 属性节点（attribute对象）;代表一个属性，元素（标签）才有属性

• 注释是注释节点（comment对象）

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

• JavaScript能够改变页面中的所有HTML元素

• JavaScript能够改变页面中的所有HTML属性

• JavaScript能够改变所有的CSS样式

• JavaScript能够对页面占用的所有时间做出反应

查找标签

直接查找

document.getElementById 根据id获取一个标签
document.getElementsByClassName  根据class属性获取
document.getElementsByName  根据标签获取标签合集

间接查找

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

节点操作

创建节点

createTextNode()方法创建新的文本节点，返回新创建的Text节点

语法：

document.createTextNode(data);

参数：

data: 字符串值，可规定此节点的文本

例子：创建一个div并向其中添加一条消息：

var newNode = document.createElement('div');
var textNode  = document.createTextNode('我是一条文本信息');
newNode.appendChild(textNode);
document.body.appendChild(newNode);

添加节点

语法：

追加一个子节点（作为最后的子节点）
​
somenode.appendChild(newnode)；
​
把增加的节点放到某个节点的前边。
​
somenode.insertBefore(newnode,某个节点);

示例：

var imgEle=document.createElement("img");
​
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
​
var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);
​
var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);

删除节点：

removeChild()方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点，如失败，则返回NULL

语法：

nodeObject.removeChild(node);

参数：

node：必需的，指定要删除的节点

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的方法</title>
</head>
<body>
    <div id="box"><p>html</p></div>
    <script type="text/javascript">
        var oBox = document.getElementById('box');
        var x = oBox.removeChild(oBox.childNodes[0]);
        console.log(x);
    </script>
</body>
</html>
​
​
注意：把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x =null来删除对象。

 

替换节点：

replaceChild实现子节点(对象)的替换。返回被替换对象的引用

语法：

node.replaceChild(newnode,oldnew);

参数：

newnode：必需，用于替换的oldnew的对象

oldnew：必需，被newnode替换的对象

例子：

var oldnew = document.getElementById('text');var newNode  = document.createElement('p');newNode.innerHTML = 'Vue';oldnew.parentNode.replaceChild(newNode,oldnew);

属性节点：

在文档对象模型(DOM)中，每一个节点都是一个对象。DOM节点有三个重要的属性：

1. nodeName: 节点的名称

2. nodeValue：节点的值

3. nodeType: 节点的类型

1.nodeName属性：节点的名称，是只读

1. 元素节点的nodeName与标签名相同

2. 属性节点的nodeName与属性的名称相同

3. 文本节点的nodeName永远是#text

4. 文档节点的nodeName永远是#document

2.nodeValue属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

3.nodeType 属性: 节点的类型，是只读的。

以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

验证

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>节点属性</title></head><body>    <div id="box">我是一个文本节点<!-- 我是注释 --></div>    <script type="text/javascript">        // 1.获取元素节点        var divNode = document.getElementById('box');        console.log(divNode.nodeName + '|' + divNode.nodeValue + "/" + divNode.nodeType);        // 2.获取属性节点        var attrNode = divNode.attributes[0];        console.log(attrNode.nodeName + '|' + attrNode.nodeValue + "/" + attrNode.nodeType);        // 3.获取文本节点        var textNode = divNode.childNodes[0];        console.log(textNode.nodeName + '|' + textNode.nodeValue + "/" + textNode.nodeType);        // 4.获取注释节点        var commentNode = divNode.childNodes[1];        console.log(commentNode.nodeName + '|' + commentNode.nodeValue + "/" + commentNode.nodeType);        // 5.文档节点        console.log(document.nodeName + '|' + document.nodeValue + "/" + document.nodeType);    </script></body></html>

• attributes属性是获取到该节点对象上的所有属性的集合

• childNodes属性是获取到该节点对象的所有子节点的集合

innerText属性

仅仅对元素来获取或者设置该文本

newNode.innerText = 'mjj';console.log(newNode);//<p>mjj</p>

如果像在p标签插入一段<a>mjj</a>，会发现<a>mjj</a>它也会充当文本的来进行设置。

innerHTML属性

既可以设置文本又可以设置标签

newNode.innerHTML = '<a>mjj</a>'

注意：如果想获取节点对象的文本内容，可以直接调用innerText或者innerHTML属性来获取

1.getAttrbute()方法

getAttribute()方法只接收一个参数——你打算查询的属性的名字。

语法：

object.getAttribute(attributeName: DOMString)

比如上述案例，如何将p标签中的title属性打印出来？

var oP = document.getElementsByTagName('p')[0];var title = oP.getAttribute('title');console.log(title);

 

如果查询不到结果，则该调用则返回null，null是JavaScript语言中的空值，其含义是’你说的这个东西不存在‘

2.setAttribute()方法

setAttrbute()方法它允许我们对属性节点的值做出修改。此方法传递两个参数。第一个参数为属性名，第二个参数为属性值

语法：

object.setAttribute(attribute,value)

例如:

var classList = document.getElementById('classList');classList.setAttribute('title','这是我们最新的课程');

 

获取值操作

语法：

elementNode.value

适用于以下标签：

• .input

• .select

• .textarea

 

var iEle = document.getElementById("i1");

console.log(iEle.value);

var sEle = document.getElementById("s1");

console.log(sEle.value);

var tEle = document.getElementById("t1");

console.log(tEle.value);

 

class的操作

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

 

指定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

 

事件

常用事件

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

绑定方法

一：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
　　 ths.style.backgroundColor="green";
}
</script>

注意：

this是实参，表示触发事件的当前元素。

函数定义过程中的this为形参。

二：

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