js操作BOM和DOM

JavaScript分类

JavaScript分为 ECMAScript，DOM，BOM。

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

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

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

BOM

window对象#

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

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

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

一些常用的Window方法：（在浏览器调试器的console里面输入下面这些属性或者方法，就能看到对应的效果）

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)

window的子对象#

navigator对象（了解即可）#

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

Copy

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

creen对象（了解即可）#

屏幕对象，不常用。

一些属性：

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

history对象（了解即可）#

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

Copy

history.forward() // 前进一页，其实也是window的属性，window.history.forward()//上下相同 history.back() // 后退一页

location对象（重点）#

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

Copy

location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面

　、、

　　上面的内容需要大家记住的是：

　　　　1.window对象

　　　　2.window的子对象：location的那几个属性和方法

　　　　3.其他的作为了解

　　我们下面来学些比较有意思有用的内容：

弹出框#

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

警告框

Copy

　警告框经常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法： alert("你看到了吗？");

确认框（了解即可）

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

我们可以根据返回的true和false来判断一下，然后根据这个值来使用location去跳转对应的网站。

Copy

确认框用于使用户可以验证或者接受某些信息。 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。 语法： confirm("你确定吗？")

提示框（了解即可）

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

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。

可以通过用户输入的内容来判断我们怎么去进行后面的操作

除了那个警告框（用的也不都多），

Copy

语法： prompt("请在下方输入","你的答案")

计时相关 （比较重要）#

Copy

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 计时事件 setTimeout() 一段时间后做一些事情 执行一次 clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。 setInterval() 每隔一段时间做一些事情 执行无数次 直到页面关闭 clearInterval()取消setInterval() 方法

**setTimeout() **#

一段时间后做一些事情 执行一次

语法：

Copy

var t=setTimeout("JS语句",毫秒) 第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）

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

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。

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

实列1

Copy

var a=setTimeout(function(){alert('我是函数 设定多少秒后弹出框')},2000); var a=setTimeout(alert('我是函数 设定多少秒后弹出框'),2000);

**clearTimeout() **#

可取消由 setTimeout() 方法设置的

语法：

Copy

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

实列取消：

Copy

// 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert('小白出征 3秒后执行');}, 3000); // 取消setTimeout设置 clearTimeout(timer); 如果取消了就不会执行相应函数

**setInterval() **#

每隔一段时间做一些事情 执行无数次 直到页面关闭

语法：

Copy

setInterval("JS语句",时间间隔) 返回值 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

实列

Copy

var timer = setInterval(function(){console.log('小白出征');}, 1000); 一秒打印一次 var timer = setInterval(function(){alert('小白出征');}, 1000); 一秒弹出一次 可以做恶意网页

clearInterval()#

用于取消setInterval() 方法

语法：

Copy

clearInterval(setinterval返回的ID值) clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

实列：

Copy

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

DOM#

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

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

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

HTML DOM 树#

　　　　

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

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

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

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）

查找标签#

直接查找#

Copy

document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取（可以获取多个元素，所以返回的是一个数组） document.getElementsByTagName 根据标签名获取标签合集

实列

Copy

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>查找标签</title> </head> <body> <div> 我是div </div> <div id="d1"> 我是div 带id属性 </div> <span class="c1"> 我是apan标签 带class属性 </span> </body> </html> var div_d1=document.getElementById('d1'); var div_c1=document.getElementsByClassName('c1'); var div=document.getElementsByTagName('div') ;//[div, div#d1, d1: div#d1]

间接查找#

Copy

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

**实列 **

准备代码

Copy

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>查找标签</title> </head> <body> <div id="d0"> 我是div0 </div> <div id="d1"> 我是div1 带id属性 <span id="d1_s"> 我是div1中的span </span> <div id="d1_d"> 我是div1中的div </div> </div> <span class="c1"> 我是apan标签 带class属性 </span> </body> </html>

实列1.由div中的span标签找到父节点div标签元素

Copy

1.由div中的span标签找到父节点div标签元素 先找到span标签 在利用span间接找到父级div var spanEle=document.getElementById('d1_s'); var divEle=spanEle.parentElement; divEle

实列2.由div1 找到所有子元素

Copy

divEle 运行结果 HTMLCollection(2) [span#d1_s, div#d1_d, d1_s: span#d1_s, d1_d: div#d1_d] 0: span#d1_s 1: div#d1_d length: 2 d1_d: div#d1_d d1_s: span#d1_s __proto__: HTMLCollection

实列3由父标签div1根据索引找子标签元素

Copy

先找到div1标签 var spanEle=document.getElementById('d1'); var divEle=spanEle.children; divEle[0]; 运行结果 <span id="d1_s"> 我是div1中的span </span>

实列4由父标签div1找第一个子标签元素

Copy

firstElementChild 第一个子标签元素 先找到div1标签 var spanEle=document.getElementById('d1'); var divEle=spanEle.firstElementChild; divEle 运行结果 <span id="d1_s"> 我是div1中的span </span>

实列5由父标签div1找最后一个子标签元素

Copy

lastElementChild 最后一个子标签元素 先找到div1标签 var spanEle=document.getElementById('d1'); var divEle=spanEle.lastElementChild; divEle 运行结果 <div id="d1_d"> 我是div1中的div </div>

实列6由标签div1找下一个兄弟标签元素

Copy

nextElementSibling 下一个兄弟标签元素 先找到div1标签 var spanEle=document.getElementById('d1'); var divEle=spanEle.nextElementSibling; divEle 运行结果 <span class="c1"> 我是apan标签 带class属性 </span>

实列7由标签div1找上一个兄弟标签元素

Copy

previousElementSibling 上一个兄弟标签元素 先找到div1标签 var spanEle=document.getElementById('d1'); var divEle=spanEle.previousElementSibling; divEle 运行结果 <div id="d0"> 我是div0 </div>

节点操作#

操作的代码

Copy

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>查找标签</title> </head> <body> <div id="d0"> 我是div0 </div> <div id="d1"> 我是div1 带id属性 <span id="d1_s"> 我是div1中的span </span> <div id="d1_d"> 我是div1中的div </div> </div> <span class="c1"> 我是apan1标签 带class属性 </span> <a href="a1">我是外边a标签</a> </body> </html>

创建节点（就是创建标签）#

---

Copy

语法： document.createElement(标签名)

实列 创建一个span标签

Copy

示例: var spanEle = document.createElement("span"); spanEle 以上代码运行结果 <span></span>

添加节点#

追加一个子节点（作为最后的子节点）

语法

Copy

somenode.appendChild(newnode)； 父标签.appendChild(要加的标签)

实列 创建一个span标签追加到div标签最后

Copy

1.先找到父标签 2.创建span标签 3父标签.appendChild(要加的标签) var divEle = document.getElementById('d1');//先找到父标签 var spanEle = document.createElement("span");//创建span标签 divEle.appendChild(spanEle);//父标签.appendChild(要加的标签) divEle; 以上代码运行结果 <div id="d1"> 我是div1 带id属性 <span id="d1_s"> 我是div1中的span </span> <div id="d1_d"> 我是div1中的div </div> <span></span></div>

把增加的节点放到某个节点的前边。

Copy

somenode.insertBefore(newnode,某个节点); 父标签.insertBefore(要加的标签，某个节点标签)

实列创建一个img标签增加到div1中span标签前面

Copy

1.创建一个img标签 给其增加属性 2.找到父标签 3.找到某个节点标签 4.父标签.insertBefore(要加的标签，某个节点标签) var imgEle=document.createElement("img");//创建一个img标签 imgEle.setAttribute("src", "http://img1.imgtn.bdimg.com/it/u=4163580791,1286387910&fm=26&gp=0.jpg");//给其增加属性 var d1Ele = document.getElementById("d1");//找到父标签 var spanEle=document.getElementById('d1_s');//找到某个节点标签 d1Ele.insertBefore(imgEle,spanEle);//父标签.insertBefore(要加的标签，某个节点标签) d1Ele//验证是否添加进去没 以上运行结果 <div id="d1"> 我是div1 带id属性 <img src="http://img1.imgtn.bdimg.com/it/u=4163580791,1286387910&amp;fm=26&amp;gp=0.jpg"><span id="d1_s"> 我是div1中的span </span> <div id="d1_d"> 我是div1中的div </div> <span></span></div>

删除节点：#

语法：

Copy

1.获得要删除的元素，通过父元素调用该方法删除。 2.父标签.removeChild(要删除的节点) 示例: 删除span2标签 var divEle = document.getElementById('d1'); var span2 = document.getElementById('s2'); divEle.removeChild(span2);

实列 删除div1中标签span标签

Copy

1.找到父标签 2.找到要删除的节点 3.父标签.removeChild(要删除的节点) var d1Ele = document.getElementById("d1");//找到父标签 var spanEle=document.getElementById('d1_s');//找到要删除的节点 d1Ele.removeChild(spanEle);//父标签.removeChild(要删除的节点) d1Ele;//验证是否删除没 以上运行结果 <div id="d1"> 我是div1 带id属性 <div id="d1_d"> 我是div1中的div </div> </div>

替换节点：#

语法：

Copy

somenode.replaceChild(newnode, 某个节点); 父级标签.replaceChild(要替换的标签，某个节点) somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

实列将div1中标签span标签替换为a标签

Copy

1.找到父标签div1 2.找到要替换的节点 3.创建a标签 4.a标签设置属性 5.父级标签.replaceChild(要替换的标签，某个节点) var d1Ele = document.getElementById("d1");//找到父标签 var spanEle=document.getElementById('d1_s');//找到要替换的节点 var a = document.createElement('a'); //创建a标签 a.innerText = 'baidu'; //添加文本内容 a.href="http://www.baidu.com" //添加属性值 d1Ele.replaceChild(a,spanEle); //父级标签.replaceChild(要替换的标签，某个节点) d1Ele; //验证是否替换没 以上运行结果 <div id="d1"> 我是div1 带id属性 <a href="http://www.baidu.com">baidu</a> <div id="d1_d"> 我是div1中的div </div> </div>

文本节点操作#

获取文本节点的值：

Copy

var divEle = document.getElementById("d1"); divEle.innerText #获取该标签和内部所有标签的文本内容 divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签

实列

Copy

var divEle = document.getElementById("d1"); var t = divEle.innerText; t 运行结果 "我是div1 带id属性 我是div1中的span 我是div1中的div" var tt = divEle.innerHTML; tt 运行结果 " 我是div1 带id属性 <span id="d1_s"> 我是div1中的span </span> <div id="d1_d"> 我是div1中的div </div> "

设置文本节点的值：

Copy

var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>" #能识别成一个p标签

实列修改div中文本值

通过此列发现被修改的标签 原有的子标签什么都没了innerText只会添加文本而innerHTML可以添加标签

Copy

var divEle = document.getElementById("d1"); divEle.innerText="1" ; var tt = divEle.innerHTML; tt 运行结果 "1" var divEle = document.getElementById("d1"); divEle.innerHTML="<p>2</p>"; var tt = divEle.innerHTML; tt； 运行结果 "<p>2</p>"

属性操作#

Copy

var a = document.getElementById("d1"); divEle.setAttribute("age","18") #比较规范的写法 divEle.getAttribute("age")//查 divEle.removeAttribute("age")//删 a[0].href;; 获取值 a.href = 'xxx'; 设置值; 设置值 //注意 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的

获取值操作#

Copy

语法： elementNode.value 适用于以下标签，用户输入或者选择类型的标签： 1.input //找到标签 value获取值 修改value就是修改值 2.select//找到标签 value获取值 3.textarea //找到标签 value获取值

实列

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cc1{ } </style> </head> <body> <div class="cc1"> </div> <div class="c1" id="d1"> are you ok? <span id="s1">span1</span> <span id="s2">span2</span> <span id="s3">span3</span> </div> <div class="c1 c2" id="d2"> div2 </div> <a href="http://www.baidu.com">百度</a> <div id="d3"> 用户名: <input type="text" id="username" name="username"> </div> <div id="d4"> <select name="city" id="select1"> <option value="1">广东</option> <option value="2">惠州</option> <option value="3">东莞</option> </select> </div> <textarea name="" id="crp" cols="30" rows="10"></textarea> </body> </html> 输入框 input 获取值 var inpEle = document.getElementById('username'); inpEle.value; 设置值 inpEle.value = 'alexDsb'; select选择框 获取值 var selEle = document.getElementById('select1'); selEle.value; 设置值 selEle.value = '1'; textarea 多行文本 var textareaEle = document.getElementById("crp") textareaEle.value；

class类值的操作#

Copy

标签对象.className 获取所有样式类名(字符串) 首先获取标签对象 标签对象.classList; 标签对象所有的class类值 标签对象.classList.remove(cls) 删除指定类 标签对象.classList.add(cls) 添加类 标签对象.classList.contains(cls) 存在返回true，否则返回false 标签对象.classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

实列

Copy

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>操作类值</title> </head> <body> <div class="a b" id="d1"> div </div> </body> </html> var divE=document.getElementById('d1'); divE.className; //获取所有样式类名(字符串) divE.classList; 标签对象所有的class类值 divE.classList.remove('b') 删除指定类 divE.classList.add('c'); 添加类 divE.classList.contains('a') 存在返回true，否则返回false divE.classList.toggle('a') 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

CSS样式操作**#

obj就是找到的标签

Copy

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

Copy

obj.style.margin obj.style.width obj.style.left obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

Copy

obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily

事件#

捕获用户行为 通过事件+上面的样式修改来实现动态效果。

Copy

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

绑定方式：#

方式一：（已经不常用了）

Copy

标签属性写事件名称=某个函数(); 普通方式 <script> var divEle = document.getElementById('d1'); 1.找到标签 divEle.onclick = function () { 2.给标签绑定事件 divEle.style.backgroundColor = 'purple'; } </script> 简写方式 <div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script> 　注意： 　　　　　　this是实参，表示触发事件的当前元素。 　　　　　　函数定义过程中的ths为形参。

方式二：

Copy

标签属性写事件名称=某个函数(); <div class="cc1 xx xx2" id="d1" onclick="f1();"></div> <script> js里面定义这个函数 function f1() { var divEle = document.getElementById('d1'); divEle.style.backgroundColor = 'purple'; } </script>

实列1 背景闪烁

原理 利用定时器 与修改类属性实现背景颜色 实现 闪烁

Copy

<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cc1{ width: 100px; height: 100px; background-color: green; } .cc2{ background-color: #47c38e; } </style> </head> <body> <div class="cc1 cc2" id="d1"> </div> <script> var div_1=document.getElementById('d1'); var timer = setInterval(function(){ div_1.classList.toggle('cc2') }, 300); </script> </body> </html>

实列2 点击事件背景变色

原理利用事件捕捉用户操作 触发执行 事件绑定的函数 使背景颜色修改

Copy

<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cc1{ height: 50px; width: 50px; background-color: green; } </style> </head> <body> <div class="cc1" id="d1"> </div> <script> var divEle = document.getElementById('d1'); divEle.onclick = function () { divEle.style.backgroundColor = 'purple'; } </script> </body> </html> 第2种绑定方式 <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cc1{ height: 50px; width: 50px; background-color: green; } </style> </head> <body> <div class="cc1" id="d1" onclick="f1();" > </div> <script> function f1() { var divEle = document.getElementById('d1'); divEle.style.backgroundColor = 'purple'; } </script> </body> </html>

实列3input框里面动态显示时间:

 

原理分析 点击事件 显示当前动态时间

点击 结束按钮事件 停止当前时间

解题步骤

1 写出input框 两个按钮绑定两个事件执行函数start()和end()

2

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>定时器测试</title> <script> function start() {//点击开始事件 var divEle = document.getElementById('d1'); divEle.style.backgroundColor = 'purple'; } function end() {//点击结束事件 var divEle = document.getElementById('d1'); divEle.style.backgroundColor = 'purple'; } </script> </head> <body> <input type="text" id="i1"> <input type="button" value="开始" id="start" onclick="start();"> <input type="button" value="结束" id="end" onclick="end();"> </body> </html>

实列4多级联动

作者： 一起奥利给

出处：https://www.cnblogs.com/saoqiang/p/11530971.html

版权：本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。