DOM 和 BOM

Html DOM

1. 简介

DOM ( Document Object Model ) 文档对象模型 是 一项 W3C标准

DOM 是 中立于 平台 和 语言 的接口，它允许程序 和 脚本 动态地 访问 、更改文档的内容、结构和样式

HTML DOM 是 HTML 的标准对象模型 和 编程接口，是DOM 其中的一部分

HTML DOM 模型被结构化 为 对象树

通过这个对象模型，JavaScript 获得 创建动态 HTML 的所有力量

  • JavaScript 能改变 页面中 所有HTML元素
  • JavaScript 能改变 页面中 所有HTML属性
  • JavaScript 能改变 页面中 所有CSS 样式
  • JavaScript 能删除 已有的 HTML元素和属性
  • JavaScript 能添加 新的HTML 元素和属性
  • JavaScript 能对 页面中 所有已有的 HTML 事件作出反应
  • JavaScript 能在 页面中 创建新的 HTML事件

2. Document 对象

HTML DOM 方法 是您 能够 在（HTML 元素上）执行的 动作

HTML DOM 属性 是您 能够 设置或改变 的 HTML 元素的 值

在 DOM 中 ，所有 HTML 元素 都被定义为 对象

HTML DOM document 对象 是 网页中 所有其它对象的 拥有者，代表 网页本身

通过 JavaScript 访问 HTML 页面中的 任何元素，总是从 document 对象开始

  1. 查找 HTML 元素

    方法 描述
    document.getElementById( id ) 通过 元素 id 来查找元素
    document.getElementsByTagName( name ) 通过 标签名 来 查找元素
    document.getElemensByClassName( name ) 通过 类名 来 查找元素
    document.querySelectorAll( css选择器 ) 通过 CSS 选择器 查找 元素

  2. 改变 HTML 元素

    方法/ 属性 描述
    element.innerHTML = new html content 改变元素的 inner HTML
    element.attribute = new value 改变 HTML 元素的 属性值
    element.setAttribute( attribute , value ) 改变 HTML 元素的属性值
    element.style.property = new style 改变 HTML 元素的 样式

  3. 添加 / 删除 HTML 元素

    方法 描述
    document.createElement( element ) 创建 HTML 元素
    document.removeChild ( element ) 删除 HTML 元素
    document.appendChild ( element ) 添加 HTML 元素
    document.replaceChild ( element ) 替换 HTML 元素
    document.write ( text ) 写入 HTML 输出流 *
    • 千万不要在文档 加载 后 使用 document.write( ) ；这么做 会 覆盖文档

  4. 添加事件 处理程序

    方法 描述
    document.getElementById( id ) = function ( ) { code } 向 onclick 事件添加 事件处理程序

3. DOM 事件

常见的 HTML 事件 示例

  • 当 用户 点击鼠标时
  • 当 网页 加载后
  • 当 图像 加载后
  • 当 鼠标 移至 元素上时
  • 当 输入 字段被改变时
  • 当 HTML 表单 被提交时
  • 当 用户 敲击 键盘时
  1. onload 和 onunload 事件

当用户进入后 及 离开页面时 ，会触发 onload 和 onunload 事件

onload 事件 可用于 检测访问者的浏览器类型 和 浏览器版本，然后基于 改信息加载网页的恰当版本

onload 和 onunload 事件 可用于 处理 cookie

  1. onchange 事件

    onchange 事件 经常 与 输入字段 验证结合使用

    <input type = "text" id = "fname" onchange = "upperCase( )">

  2. onmouseover 和 onmuouseout 事件

    onmouseover 和 onmouseout 事件 可用于 当用户 将 鼠标移至 HTML 元素上或 移出时 触发某个函数

  3. onmousedown 、onmouseup 以及 onclick 事件

    onmousedown、onmouseup、onclick 事件 构成了 完整的 鼠标点击事件

    当 鼠标 按钮被点击时，onmousedown 事件被触发

    然后 当 鼠标 按钮被释放时，onmouseup 事件被触发

    最后 当 鼠标 点击 完成后，onclick 事件被触发

DOM 事件监听程序

事件传播 是 一种 定义当 发生事件时 元素次序的方法

在 HTML DOM 中 由两种事件传播的方法：冒泡 和 捕获(capture)

在冒泡 中 ，最内侧元素的事件会首先被处理，然后是更外侧的

在捕获 中，最外侧的元素会首先被处理，然后是更内侧的

useCapture 参数规定事件传播类型； true 为 捕获传播，false 为 冒泡传播

  1. addEventListener( ) 方法 为 指定元素 指定事件处理程序
element.addEventListener(event,function,useCapture)   //语法
// 第一个参数 event 是 事件的类型 eg:click / mousedown
// 第二个参数 是当事件发生时 需要调用的函数
// 第三个参数 是布尔值，指定使用事件冒泡；还是事件捕获(可选)

element.addEventListener("click",function( ) {
    alert("Hello!");
});

// 引用外部的“命名”函数
element.addEventListener("click",myFunction);
function myFunction() {
    alert ("Hello!");
}

addEventListener( ) 方法 可以向 相同元素 添加多个事件，同时不覆盖 已有的事件

addEventListener( ) 方法 传递参数值时，以参数形式使用调用指定函数的 ”匿名函数“

  1. removeEventListener( ) 方法 会删除 通过 addEventListener( ) 方法附加的事件处理程序

4. Event 对象

Event 对象 代表 事件的状态，比如 事件在其中发生的元素、键盘按键的状态、鼠标的位置等

事件通常 与 函数结合使用，函数不会在事件发生前被执行

1. 事件句柄

如下 是一个属性列表，可将其插入 HTML标签 以定义事件的行为

属性 此事件发生在何时
onabort 图像的加载被中断
onblur 元素失去焦点
onchange 域的内容被改变
onclick 当用户点击某个对象时 调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onerror 在加载文档或图像时发生错误
onfocus 元素获得焦点
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘被松开
onload 一张页面或一副图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移动到某元素上
onmouseup 鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被重新调整大小
onselect 文本被选中
onsubmit 确认按钮被点击
onunload 用户退出界面

5. DOM 节点

根据 W3C HTML DOM 标准，HTML 文档中 所有事物 都是节点

  • 整个文档 是 文档节点
  • 每个HTML 元素 是 元素节点
  • HTML 元素内的 文本 是 文本节点
  • 每个 HTML 属性 是 属性节点
  • 所有注释 是 注释节点

1. 节点关系

HTML 中 所有节点构成 节点树，节点树中的节点彼此之间有一定的等级关系

  • 术语（父、子和同胞、parent、child 以及 sibling）用于描述这些关系

  • 在节点树中，顶端节点 成为 根（根节点/root）

  • 每个节点都有 父节点，除了根（根节点 没有父节点）

  • 节点能够 拥有一定数量的 子

  • 同胞（兄弟或姐妹）指的是拥有 相同父 的节点

    <html>
    <head>
        <title>DOM 教程</title>
    </head>
    <body>
        <h1>DOM 第一课</h1>
        <p>Hello!</p>
    </body>
</html>

/* 
从以上的HTML 中，从节点的角度分析
1. <html> 根节点,没有父 且 是 <head> 和 <body> 的父
2. <head> 是 <html> 的第一个子 且 自身有一个子为 <title>
3. <body> 是 <html> 的最后一个字 且 自身有两个子 <h1> 和 <p> ;另外 <head>和<body>是同胞关系
4. <title> 有一个子（文本节点）："DOM 教程"
5. <h1> 有一个子 ："DOM 第一课"
6. <p> 有一个子："Hello!" 且 <h1> 和 <p> 是同胞关系
*/

在节点之间导航

通过 JavaScript， 可以使用以下节点属性 在节点之间导航

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • perviousSibling

子节点 和 节点值

DOM 处理中 一种常见错误 是认为元素节点 中 包含文本，实际两者是分开的

文本节点的值 能够通过以下几种形式进行访问

  1. 示例

    <title id = "demo">DOM 教程</title>
<script>
	var myTitle = document.getElementById("demo").innerHTML;
    var myTitle = document.getElementById("demo").firstChild.nodeValue;
    var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
</script>

DOM 根节点

根节点 又称 root节点

有两个特殊属性 允许访问完整文档：

  1. document.body ------文档的body
  2. document.documentElement -----完整文档

nodeName属性

nodeName属性 规定 节点的名称

  • nodeName 是 只读的
  • 元素节点的 nodeName 等同于 标签名
  • 属性节点的 nodeName 是属性的名称
  • 文本节点的 nodeName 总是 #text
  • 文档节点的 nodeName 总是 #document

nodeValue属性

nodeValue属性 规定 节点的值

  • 元素节点 的 nodeValue 是 undefined
  • 文本节点 的 nodeValue 是 文本
  • 属性节点 的 nodeValue 是 属性值

2. 操作节点

  1. 创建新的 HTML 元素(节点)

    向 HTML DOM 添加新元素，必须先创建这个元素(元素节点)，然后将其追加到已有元素

    <div id = "div1">
    <p id = "p1"> 这是第一个段落</p>
    <p id = "p2"> 这是第二个段落</p>
</div>
<script>
	var para = document.createElement("p")       // 创建一个新的<p>元素 createElement()方法
    var node = document.createTextNode("这是第三个段落 ");  // 创建一个文本节点 createTextNode()方法
    para.appendChild(node);     // 向 <p> 元素追加这个文本节点
    
    var element = document.getElementById("div1");  // 查找一个已有的元素
    element.appendChild(para);       //　向这个已有元素追加新元素 appendChild()方法
    
    
    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para,child);           // 或者用 insertBefore()方法
</script>

  2. 删除已有 HTML 元素

    若需要删除某个 HTML元素 需要知晓该元素的父

    var parent = document.getElementById("div1");
var child = document.getElementById("p1");
child.parentNode.removeChild(child);        // removeChild()方法删除，先使用 parentNode属性找到父，然后在删除其子

  3. 替换 HTML 元素

    parent.replaceChild(para,child);      //使用 replaceChild()方法

6. DOM 集合

HTMLCollection 对象 是 类数组 的 HTML元素列表(集合)

  1. getElementsByTagName( ) 方法 返回 HTMLCollection 对象

    var x = document.getElementById("p");

y = x[1];  //该集合中的元素可以通过索引号进行访问，索引号从０开始

  2. length 属性 定义了 HTMLCollection 中 元素的数量

    var myCollection = document.getElementById("p");
var i ;
for (i = 0 ; i < myCollection.length ; i ++) {
    myCollection[i].style.backgroundColor = "red";
}
// 通过遍历集合中的元素 从而改变所有 <p> 元素的背景色

需要注意的是，HTMLCollection 是类数组，并非真正的数组，比如无法使用数组的方法，诸如 valueOf( ) / pop( ) / push( ) / join( ) 等

NodeList 对象 是 从文档中 提取的节点列表 (集合)

NodeList 对象 与 HTMLCollection 对象 几乎相同

不同之处在于 访问 HTMLCollection 项目，可以通过 名称、id 或索引号

​ 而访问 NodeList 项目，只能通过其索引号

Browser BOM

1. 简介

浏览器对象模型（ Browser Object Model）

2. Window 对象

所有浏览器都支持 window 对象，它代表 浏览器的窗口

所有 全局 JavaScript 对象、函数 和 变量 自动成为 window 对象的成员

全局变量 是 window 对象的 属性 ( 包括HTML DOM 的 document 对象)； 全局函数 是 window 对象的 方法

窗口尺寸

  1. window.innerHeight 属性 返回浏览器窗口 的内高度(px)

  2. window.innerWidth 属性 返回浏览器窗口的 内宽度(px)

    // 一个实用的 JavaScript 解决方案(包括所有浏览器)
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeigth;

// 改实例 显示 浏览器窗口的高度和宽度（不包括工具栏和滚动条）

  3. 其他窗口方法

  • window.open( ) 方法 打开新窗口
  • window.close( ) 方法 关闭当前窗口
  • window.moveTo( ) 方法 移动当前窗口
  • window.resizeTo( ) 方法 重新调整当前窗口

3. Screen 对象

window.screen 对象 包含用户屏幕的信息(可不带前缀window)

  1. screen.width 属性 返回以像素计的访问者屏幕宽度

  2. screen.height 属性 返回 以像素计的访问者屏幕高度

  3. screen.availWidth 属性 返回 以像素计的访问者屏幕的宽度，减去诸如窗口工具条之类的界面特征

  4. screen.availHeight 属性 返回 以像素计的访问者屏幕的高度，减去诸如窗口工具条之类的界面特征

  5. screen.colorDepth 属性 返回用于显示一种颜色的比特数

    24位硬件的 色彩分辨率 ： 24bits = 16，777，216 种 不同的 ”True Colors“

    32位硬件的 色彩分辨率： 32bits = 4，294，967，296 种不同的 “ Deep Colors”

    14位硬件的 色彩分辨率： 65536 种 不同的 “High Colors”

    8 位硬件的 色彩分辨率：256 种 不同的 “VGA colors”

    HTML 中 使用的 #rrggbb(rgb) 值 代表 “ True Colors”

  6. screen.pixelDepth 属性 返回 屏幕的像素深度

4. Location 对象

window.location 对象 用于 获取当前页面地址(URL) 并把浏览器重新定向到新的页面(可不带前缀window)

  1. window.location.href 属性 返回当前页面的 URL
  2. window.location.hostname 属性 返回(当前页面的)因特网主机的名称
  3. window.location.pathname 属性 返回当前页面的路径名
  4. window.location.protocol 属性 返回页面的 web 协议
  5. window.location.port 属性 返回(当前页面的) 互联网主机端口的编号
  6. window.location.assign( ) 方法 加载新文档

5. History 对象

window.history 对象 包含浏览器历史(可不带前缀window)

  1. history.back( ) 方法 加载历史列表 中的前一个 URL ；等同于在浏览器中点击 后退按钮
  2. history.forward( ) 方法 加载历史列表中 下一个 URL； 等同于在浏览器中点击 前进按钮

6. Navigator 对象

window.navigator 对象 包含 有关访问者的信息(可不带前缀window)

  1. navigator.cookieEnabled 属性 返回true，表示 cookie 已启用，否则返回 false

  2. navigator.appName 属性 返回浏览器的应用程序名称

    “ Netscape ” 是 IE11、Chrome 、Firefox 以及 Safari 的应用程序的统称

  3. navigator.appCodeName 属性 返回浏览器的应用程序代码名称

    “ Mozilla ” 是 Chrome 、Firefox 、IE 、Safari 以及 Opera 的应用程序代码名称

  4. navigator.product 属性 返回浏览器引擎的产品名称

  5. navigator.appVersion 属性 返回有关浏览器的版本信息

  6. navigator.userAgent 属性 返回由浏览器发送到服务器的用户代理报头(user-agent header)

  7. navigator.platform 属性 返回浏览器平台(操作系统)

  8. navigator.language 属性 返回浏览器语言

  9. navigator.onLine 属性返回 true 表示浏览器目前是在线状态

  10. navigator.javaEnable( ) 方法 返回 true 表示 浏览器 Java 已启用

7. 弹出框

JavaScript 有 三种类型的弹出框：警告框、确认框 和 提示框

1. 警告框

如果要确保信息 传递给 用户，通常会使用警告框(可不带window前缀)

  1. 语法

    window.alert("sonmetext");

2. 确认框

如果需要 用户验证 或 接受某个东西，通常使用 确认框(可不带window前缀)

  1. 语法

    window.confirm("sometext");
// 弹出 “确定” 或 “取消”按钮 ; 确定 返回 true , 取消 返回 false

3. 提示框

如果 需要 用户在进入页面输入值，通常 使用 提示框(可不带window前缀)

  1. 语法

    window.prompt("sometext",defaultText);
// 弹出一个文本框和 确定、取消按钮 
// 若 用户单击 确定，该框返回输入值; 若 用户单击 取消 ，该框返回 NULL
  • 折行：若需要 在弹出框中 显示 折行 ，在 反斜杠后面 加 一个字符 n ；“ \n ”

8. Timing 事件

定时事件 ( Timing Events ) 允许 JavaScript 在 指定时间间隔内执行

setTimeout( ) 和 setInterval( ) 都属于 HTML DOM Window 对象的方法

  1. setTimeout( ) 方法（可不带 window 前缀）

    window.setTimeout(function ,milliseconds);

// 在等待指定的毫秒数后执行 函数

    <button onclick = "setTimeout(myFunction,3000)">试一试</button>
<script>
	function myFunction( ) {
        alert("Run!");
    }
</script>
// 单击按钮，等待3秒，页面弹出 "Run!" 警告框

    clearTimeout( ) 方法 停止执行 setTimeout( ) 中 规定的函数（可不带 window 前缀）

    window.clearTimeout(timeoutVariable);

myVar = setTimeout(function,milliseconds);
clearTimeout(myVar);
// clearTimeout( ) 使用从 setTimeout( ) 返回的变量

  2. setInterval( ) 方法在 每个给定的时间间隔 重复执行给定的函数（可不带 window 前缀）

    window.setInterval(function,milliseconds);
// 第一个参数 是要执行的函数
// 第二个参数 是每个执行之间的时间间隔长度

    var myVar = setInterval(myTimer,1000);
function myTimes( ) {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimesString(); 
}
// 以 1s 间隔显示当前时间

    clearInterval( ) 方法 停止执行 setInterval( ) 方法中的指定函数（可不带 window 前缀）

    window.clearInterval(timeVarible);

当 web 服务器向 浏览器发送网页后，连接被关闭，服务器会忘记用户的一切

Cookie 是 计算机上存储在小的文本文件中的数据；用于存储用户信息，以便下次访问

例如：Chrome 浏览器Cookie默认存储位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Cache

  1. 通过 JavaScript 创建 cookie

    JavaScript 可以用 document.cookie 属性 创建 、读取、删除cookie

    document.cookie = "username = Bill Gates;expires = Wed,27 Jan 2021 14:05:00 UTC; path = "/";"
// expires 添加cookie有效日期
// path  添加cookie存储路径;默认情况下，cookie属于当前页

  2. 通过 JavaScript 读取 cookie

    var x = document.cookie;
// 返回一条 字符串 包含所有 cookie

  3. 通过 JavaScript 改变 cookie

    跟创建cookie 一样 类似操作，新的cookie覆盖旧的cookie

  4. 通过 JavaScript 删除 cookie

    直接把 expires 的参数 设置位过去的日期 即可(需要指明需要被删除的cookie路径)

JavaScript Cookie 实例

下面示例，会创建一个 cookie 来存储访问者的名称

当访客 第一次访问网页，会要求填写姓名，然后将该名称存储在 cookie 中

下次访客 再次访问该页面时，将收到一条 欢迎消息

  1. 设置 cookie 的函数

首先，创建一个函数，将访问者的名字 存储在 cookie 变量中

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime( d.getTime() + (exdays*24*60*60*1000) );
    var expires = "expires = " + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// cname(cookie的名字)、cvalue(cookie的值)、exdays(cookie过期的天数)
// d.setTime( )  方法 设置 Date对象中的日期和时间值，以时间戳的形式
// d.getTime( )  方法 返回 Date对象中的时间值，以时间戳的形式
// d.toUTCString( ) 方法 返回一个已被转换为字符串的，用全球标准时间 (UTC)表示的日期。

  1. 获取 cookie 的函数

    然后，创建1个函数 返回指定 cookie的值

    function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0 ; i < ca.length ; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
// decodeURIComponent( ) 方法 返回统一资源标识符 (URI) 的一个已编码组件的非编码形式。
// decodedCookie.split( ) 方法 将一个字符串 分割为子字符串，结果以字符串数组返回
// c.charAt( ) 方法  返回指定索引 位置处的字符串
// c. substring( ) 方法 返回位于 String 对象中指定位置的子字符串
// c. indexOf( ) 方法  返回 String 对象内第一次出现子字符串的字符位置

  2. 检测 cookie 的函数

    最后，我们创建检查 cookie 是否设置 的函数

    若已设置cookie ，将显示一个问候

    若未设置cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365天，通过 调用 setCookie 函数

    function checkCookie( ) {
    var username = getCookie("username");
    if (username != "") {
    	alert("Welcome again" + username);
    } else {
        username = prompt("Please enter you name:","");
        if (username != "" && username != null) {
            setCookie("username",username,365);
        }
    }
}
// prompt( )     提示框
posted @ 2021-01-27 21:44  Kuiperbelt  阅读(102)  评论(0)    收藏  举报