前端基础之BOM和DOM

Posted 2020-10-19 明王不动心

核心知识点:

1.BOM(浏览器窗口对象模型) DOM(文本对象模型)

2.window对象是客户端javascript最高层对象之一,属于全局对象,一般书写可以省略

3.window对象常用的方法

　　(1)窗口对象方法

　　(2)子对象方法

　　　　a.navigator对象(一般用于读取浏览器信息)

　　　　b.screen对象

　　　　c.history对象(forward back go)

　　　　d.location对象(reload href)

4.DOM:是一套对文档抽象和概念化的一种方法,可以说是一个应用程序接口

5.节点种类:文档、元素、文本、属性、注释

6.查找标签：

　　a.直接查找（通过ID、className、Name、TagName）

　　b.间接查找（父-子-兄）

7.属性节点操作方法：

　　a.attributes、getAttribute、setAttribute

8.文本节点操作方法：

　　a.修改文本信息

　　　　ele.innerText      获取文本节点内容

　　　　ele.innerText="字符串"  修改标签的文本信息

　　b.文档内容（html内容）

　　　　ele.innerHTML             获取文档内容

　　　　ele.innerHTML="<h1>hao</h1>"  赋值HTML内容

9.样式操作：

　　a.操作class类（className/calssList.[remove/add/contains/toggle]）

　　b.指定CSS操作：obj.style.backgroundColor = "red"直接指定元素进行修改

10.事件

　　a.常用事件（onclick onfocus onchange onkeydown onload onselect ）

　　b.事件的绑定　　　

　　　　（1） 在标签里面直接写on动作=func();
　　　　（2）通过JS代码绑定事件 ele.click=function(){alert(123);}
　　　　（3）基于已经存在的父标签来给子标签绑定事件， --> 事件委托的方式

 

之前我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法并没有和浏览器有任何交互，本章将介绍一些DOM和BOM的相关知识。

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().

 

一、BOM——window对象

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

在客户端JavaScript中，window对象是全局对象，所有的表达式都是在当前的环境中计算。

也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写window.document。

 

1.窗口对象常用方法

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

window窗口对象常用方法

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

 

 

 

 

 

 

 

 

 

 

 

2.window的子对象

1）navigator对象

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

navigator.appName
"Netscape"    <--一般是网景公司-->

navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36"

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36"

navigator.platform
"Win32"

navigator示例

2）screen对象（屏幕对象，不常用）

3）history对象

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

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

4）location对象

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

 

二、DOM

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

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

简单来讲，DOM是一种API（应用程序接口）。

 

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

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

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

1.查找标签

• document.getElementById
• document.getElementsByName
• document.getElementsByClassName
• document.getElementsByTagName

<--源码-->
<div class="c1">
    <div><p id="p1">标签1</p></div>
    <div class="c2">标签2</div>
    <div class="c3">标签3</div>
</div>

<--查找-->
document.getElementById("p1")
<p id=​"p1">​标签1​</p>​
document.getElementsByClassName("c2")
[div.c2]
document.getElementsByTagName("P")
[p#p1, p1: p#p1]

查找示例

 

2.间接查找

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

 

 

 

 

 

 

 

 

 

 

 

 

<--代码-->
<hl>DOM文档结构</hl>
<div class="c1">
    <div><p id="p1">标签1</p></div>
    <div class="c2">标签2</div>
    <div class="c3">标签3</div>
</div>222
    <div class="c4">标签4</div>

<--间接查找-->
<--获取c1对象-->
var eleC1 = document.getElementsByClassName("c1")[0];

eleC1
<div class=​"c1">​…​</div>​

<--父节点-->
eleC1.parentNode
<body>​…​</body>​

<--所有子节点-->
eleC1.childNodes
(7) [text, div, text, div.c2, text, div.c3, text]

<--第一个子节点-->
eleC1.firstChild
#text

<--最后一个子节点-->
eleC1.lastChild
#text

<--下一个兄弟节点-->
eleC1.nextSibling
"222
    "

<--上一个兄弟节点-->
eleC1.previousSibling
#text

<--父节点标签元素-->
eleC1.parentElement
<body>​…​</body>​

<--所有子标签-->
eleC1.children
(3) [div, div.c2, div.c3]

<--第一个子标签元素-->
eleC1.firstElementChild
<div>​…​</div>​

<--最后一个子标签元素-->
eleC1.lastElementChild
<div class=​"c3">​标签3​</div>​

<--下一个兄弟标签元素-->
eleC1.nextElementSibling
<div class=​"c4">​标签4​</div>​

<--上一个兄弟标签元素-->
eleC1.previousElementSibling
<hl>​DOM文档结构​</hl>​

间接查找示例

 

三、document对象的属性和操作

1.属性节点

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

 

 

 

 

 

 

 

eleC1.attributes
NamedNodeMap {0: class, length: 1}

<--查看指定的标签属性-->
eleC1.getAttribute("class")
"c1"

<--修改标签属性-->
eleC1.setAttribute("class",\'c11\');
undefined

eleC1.getAttribute("class")
"c11"

<--移除标签属性-->
eleC1.removeAttribute("class");
undefined

eleC1.attributes
NamedNodeMap {length: 0}

示例

 

2.文本节点

innerText	所有的纯文本内容，包含子标签中的文本
outerText	与innerText类似
innerHTML	所有子节点（包括元素、注释与文本节点）
outerHTML	返回自身节点与所有子节点
textContent	与innerText类似，返回的内容带样式
data	文本内容
length	文本长度
createTextNode()	创建文本
normalize()	删除文本与文本之间的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	从offset指定的位置开始删除count个字符
insertDara(offset,text)	在offset指定的位置插入text
replaceDate(offset,count,text)	替换，从offset开始到offscount处的文本被text替换
substringData(offset,count)	提取从offset开始到offscount处的文本

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意：加粗的部分为常用的部分

eleC1.innerText
"标签1

标签2
标签3
"
eleC1.outerText
"标签1

标签2
标签3
"
eleC1.innerHTML
"
    <div><p id="p1">标签1</p></div>
    <div class="c2" style="color: #CC0000">标签2</div>
    <div class="c3">标签3</div>
"
eleC1.outerHTML
"<div class="c1">
    <div><p id="p1">标签1</p></div>
    <div class="c2" style="color: #CC0000">标签2</div>
    <div class="c3">标签3</div>
</div>"

常用方法举例

 

3.样式操作

1）操作class类

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

eleC1.classList
(4) ["c1", "c12", "c13", "c14", value: "c1 c12 c13 c14"]
eleC1.classList.remove("c13")
undefined
eleC1.classList
(3) ["c1", "c12", "c14", value: "c1 c12 c14"]
eleC1.classList.add("c15");
undefined
eleC1.classList
(4) ["c1", "c12", "c14", "c15", value: "c1 c12 c14 c15"]
eleC1.classList.contains("c14");
true
eleC1.classList.toggle("c16");
true
eleC1.classList
(5) ["c1", "c12", "c14", "c15", "c16", value: "c1 c12 c14 c15 c16"]

示例

 实例1:来回切换的功能的实现

    <style>
        .c1 {
            height: 300px;
            width: 300px;
            border-radius: 150px;
            background-color: red;
        }
        .c2 {
            height: 300px;
            width: 300px;
            border-radius: 150px;
            background-color: yellow;
        }
    </style>
    <script>
        function change() {
            //找标签，改变颜色
             var d1 = document.getElementById("d1");
             //有这个属性就删除，没有就添加，这样就能实现无限切换
            d1.classList.toggle("c2")
        }
    </script>
</head>
<body>
    <div id="d1" class="c1"></div>
    <input type="button" value="切换" onclick=change()>
</body>
</html>

两个颜色随意切换

效果:

点击切换

可以无限切换,只是暂时改变对象的属性

 实例2:简单菜单打印:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 20%;
            background-color: #2559a2;
            height: 100%;
        }

        .right {
            width: 80%;
        }
        .tital {
            text-align: center;
            padding: 8px 15px;
            border-bottom: 1px solid red;
        }

        .content > div {
            padding: 7px;
            background-color: rebeccapurple;
            color: white;
            border-bottom: 1px solid black;
        }

        .hide {
            display: none;
        }
    </style>
    <script>
        //定义一个函数
        function show(ths) {
            //隐藏所有的.content标签  --> classList.add("hide")
            //1.找标签（所有.content标签），通过class找
            var contentEles = document.getElementsByClassName("content");
            //节点对象属性
            //遍历上面的标签数组
            for (var i = 0; i < contentEles.length; i++) {
                contentEles[i].classList.add("hide")
            }

            //如何让函数知道我点的那个菜单（传参数）
            //显示我下面的content标签 -->classlist.remove("hide")
            //1.找这个标签下面的content标签，通过查找兄弟标签的方法来进行
            var nextEle = ths.nextElementSibling;
            //2.显示这个content标签
            //有就删除，没有就添加
            nextEle.classList.toggle("hide");
            console.log(nextEle)
        }
    </script>
</head>
<body>
<div class="left">
    <div class="item1">
        <div class="tital" onclick="show(this)">菜单一</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <!--总结一下思路，当你点击一个菜单的时候，它会把所有content隐藏-->
    <!--然后根据你点的，查找他们下面的content，然他们显示出来-->
    <div class="item2">
        <div class="tital" onclick="show(this)">菜单二</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>

    <div class="item3">
        <div class="tital" onclick="show(this)">菜单三</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div以上是关于前端基础之BOM和DOM的主要内容，如果未能解决你的问题，请参考以下文章
 
 前端基础之BOM和DOM
 前端基础之BOM和DOM
 前端基础之BOM和DOM
 前端基础之BOM和DOM
 前端基础之BOM和DOM
 30.Python前端基础之BOM和DOM