DOM和BOM

阅读量：4681 次

发布时间：2019-06-09

本文共 11552 字，大约阅读时间需要 38 分钟。

前戏

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指浏览器窗口对象模型，顶级对象是window。

DOM （Document Object Model）是指文档对象模型，并非一个对象。

window、document都是一个实例对象，他们都属于Object，表示浏览器中打开的窗口。

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

window对象

window 对象表示一个浏览器窗口。

在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document

同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。

alert()            显示带有一段消息和一个确认按钮的警告框。setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval()    取消由 setInterval() 设置的 timeout。setTimeout()       在指定的毫秒数后调用函数或计算表达式。clearTimeout()     取消由 setTimeout() 方法设置的 timeout。scrollTo()         把内容滚动到指定的坐标。confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。prompt()           显示可提示用户输入的对话框。open()             打开一个新的浏览器窗口或查找一个已命名的窗口。close()            关闭浏览器窗口。

几个例子

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

window的子对象

navigator对象

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

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

screen对象

屏幕对象，不常用。

history对象

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

history.forward()  // 前进一页history.back()  // 后退一页history.go(n)  //  前进n页

location对象

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

DOM

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

它是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。简单来讲，DOM是一种API（应用编程接口）。

JavaScript对DOM进行了实现，对应于JavaScript中的document对象，通过该对象对DOM文档进行程序级别的控制。

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

文档节点(document对象)：代表整个文档

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

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

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

注释是注释节点(comment对象)

查找标签

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

间接查找

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

document对象的属性和操作

属性节点

attributes	获取所有标签属性
getAttribute()	获取指定标签属性
setAttribute()	设置指定标签属
removeAttribute()	移除指定标签属
var s = document.createAttribute("age") s.nodeValue = "18"	创建age属性设置属性值为18

文本节点

innerText	所有的纯文本内容，包括子标签中的文本
outerText	与innerText类似
innerHTML	所有子节点(包括元素、注释和文本节点)
outerHTML	返回自身节点与所有子节点

textContent	与innerText类似，返回的内容带样式
data	文本内容
length	文本长度
createTextNode()	创建文本
normalize()	删除文本与文本之间的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	从offset指定的位置开始删除count个字符
insertData(offset,text)	在offset指定的位置插入text
replaceData(offset,count,text)	替换，从offset开始到offscount处的文本被text替换
substringData(offset,count)	提取从ffset开始到offscount处的文本

样式操作

操作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.marginobj.style.widthobj.style.leftobj.style.position

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

obj.style.marginTopobj.style.borderLeftWidthobj.style.zIndexobj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

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

常用的那些

操作内容

innerText  文本innerHTML  HTML内容value  值

事件示例

    
              事件示例

文档节点的增删改查

增

createElement(name)  创建节点（标签）appendChild() 末尾添加节点，并返回新增节点 insertBefore()  参照节点之前插入节点，两个参数：要插入的节点和参照节点 insertAfter()  参照节点之后插入节点，两个参数：要插入的节点和参照节点

删

查找到要删除的元素获取它的父元素使用removeChild()方法删除

改

第一种方式:

使用上面增和删结合完成修改

第二种方式:

使用setAttribute();方法修改属性

使用innerHTML属性修改元素的内容

查

使用之前介绍的方法.

跑马灯示例

    
              跑马灯示例    老铁666!

DOM文档结构

    
               DOM文档结构DOM文档结构
搜狗一下
           
                000    
                111    
                    
             P标签
    
            
    222
           
           
            c1
           
           
            c2

class属性操作

    
               class属性操作

左侧菜单示例

实现全选,反选和取消操作

    
               作业分解小礼包

　　　　　　　　#for (var i=0;i

// 取消        function cancleAll() {            // 找到所有的checkbox，全部取消选中            // 1. 经过技术选型，决定使用.class方式查找标签            var contentEles = document.getElementsByClassName("a");            // 2. 修改  eleObj.checked = false;            for (var i = 0; i < contentEles.length; i++) {                contentEles[i].checked = false;            }        }    
           
                                                       #                       姓名                       年龄                  
                
                                                                             Alex                       18                  
                                                             Egon                       19                  
                                                             Gold                       35

#	姓名	年龄
	Alex	18
	Egon	19
	Gold	35

今日总结

BOM    window DOM    文档结构       元素节点       文本节点       属性节点 查找节点    CSS选择器       基本选择器          标签选择器  --> 标签名          id选择器    --> #id值          class选择器 --> .class名          * 选择器    --> *    JS找标签       基本查找          1. document.getElementsByTagName          2. document.getElementById          3. document.getElementsByClassName       间接查找          根据标签的层级关系去找          1. parentElement 父节点标签元素          2. children  所有子标签          3. firstElementChild  第一个子标签元素          4. lastElementChild  最后一个子标签元素          5. nextElementSibling  下一个兄弟标签元素          6. previousElementSibling  上一个兄弟标签元素 操作节点的属性    1. 修改文本       innerText    2. 修改节点文档       innerHTML    3. 修改样式       1. 通过class属性，修改          className  获取所有样式类名(字符串)          classList.remove(cls)  删除指定类          classList.add(cls)  添加类          classList.contains(cls)  存在返回true，否则返回false          classList.toggle(cls)  存在就删除，否则添加       2. 通过style属性修改          1. 没有中横线的             eleObj.style.padding          2. 有中横线的             eleObj.style.backgroundColor

自定义模态框

    
               自定义模态框

select联动

    
               select联动

键盘事件

    
               键盘事件

onload事件

    
               onload事件

鼠标事件

    
               鼠标事件

onselect事件

    
               onselect事件

###10.js文件 /**  * Created by Administrator on 2017/12/29.  */     // 找标签 var i1Ele = document.getElementById("i1"); i1Ele.onselect = function () {
              alert("真香啊！"); }

事件绑定示例

总结知识点

1. BOM window

location.href = "https://www.sogo.com"          location.reload()  // 重新加载当前页          location.href       DOM          document             1. 节点分为：                文档节点 document                文本节点 标签的文本                属性节点 id, class ...                标签节点 div,span, h1 ...             2. 寻找节点                1. 基本查找                   标签名：document.getElementsByTagName                   ID：    document.getElementByID                   class名: document.getElementsByClassName                2. 间接查找                   我的上一个标签： previousElementSibling                   我的下一个标签： nextElementSibling                   我的父标签：     parentElement                   我的子标签：     children                   我的第一个子标签：firstElementChild                   我的最后一个子标签：lastElementChild             2. 修改标签属性或样式                1. 修改文本信息                   ele.innerText               获取文本节点的内容（包括子标签的文本）                   ele.innerText="字符串"      修改标签的文本信息                2. 文档内容（HTML内容）                   ele.innerHTML               获取文档内容                   ele.innerHTML=“好
” 赋值HTML内容                3. 修改样式                   1. classList                      ele.className               获取所有的class类名（字符串类型）                      ele.classList               获取所有的class类名                      ele.classList.contains(cls) 判断有没有某个class                      ele.classList.add(cls)      添加一个class类名                      ele.classList.remove(cls)   删除class类名                      ele.classList.toggle(cls)   切换（有就删除，没有就添加）                   2. ele.style.样式=""                      注意：有中横线的CSS样式要转成驼峰形式                      ele.style.backgroundColor="red"                4. 属性                   ele.attributes  获取所有的属性信息 2. RegExp（正则）    1. 正则表达式不能加空格    2. 当你设置了全局的g标志位，需要注意lastIndex  --> 每一次匹配上之后会把lastIndex设置为下一位索引值    3. undefined他帮你转成"undefined"来做正则校验 3.事件       常用事件：          onfocus()          onblur()          onchange()事件 --> select联动的例子                               1. selectEle.selectedIndex       --> 获取当前选中的option的索引值                               2. selectEle.options             --> 获取所有的option选项                                   3. selectEle.options.length=0    --> 清空所有的option选项          键盘事件 --> jQuery讲个示例       绑定事件的方式：  *****          1. 在标签里面直接写on动作=func();          2. 通过JS代码绑定事件 ele.click=function(){alert(123);}          3. 基于已经存在的父标签来给子标签绑定事件，  --> 事件委托的方式    3. 文档标签的创建       引申出来的：          script标签一般写在body标签的最下面，除非是文档加载之前就要运行的代码要放在head标签里 ***** DOM补充问题 循环添加表格内容