JS基础知识（三）——BOM,DOM

最新推荐文章于 2024-05-29 19:02:09 发布

贾学习

最新推荐文章于 2024-05-29 19:02:09 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： 115 前端 JS

本文链接：https://blog.youkuaiyun.com/SSR_J_Study/article/details/89297775

115 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

本文详细介绍了JavaScript中的闭包，并深入探讨了BOM（浏览器对象模型），包括Window对象的属性和方法，如screenLeft、alert、setTimeout等。接着讲解了DOM（文档对象模型），阐述了节点访问、操作、属性操作、文本操作等内容，以及DOM事件的事件流、事件处理程序和事件对象的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

w3c规则，ie的盒模型

一、闭包

函数可以访问向上函数作用域的变量

二、BOM-浏览器对象模型

将HTML构建成一个DOM树，DOM树的构建过程是一个深度遍历的过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
将CSS解析成CSS去构造CSSOM(CSS Object Model,CSS对象模型)树。
根据DOM树和CSSOM来构造Rendering Tree（渲染树）。

注意：Rendering Tree渲染树并不等同于DOM树，因为一些像Hender或display：none的东西就没必要放在渲染树中了。

（一）BOM内的Window对象

screenLeft（属性）：屏幕左边，返回窗口相对于屏幕的x坐标
screenTop：返回窗口相对于屏幕的y坐标
screenX(IE)
screenY(IE)
alert：出现警告
alert("警告内容");--加引号
prompt：可输入内容的对话框
prompt("框上说明"（可无）);
confirm：取消一个对话框
setTimeout，setInterval(时间单位为毫秒)
setTimeout：一段时间后执行所给函数
setTimeout ( functionname / function ( ) { 函数体 } , 多少毫秒后执行 )
setInterval：每隔一段时间执行所给函数
clearTimeout，clearInterval：删除定时器
var time=setTimeout（ , ）；clearTimeout（time）；

（二）Location对象

hash属性：设置或返回从井号 (#) 开始的 URL（锚）。
host属性：设置或返回主机名和当前 URL 的端口号。
href属性：设置或返回完整的 URL。
port属性：设置或返回当前 URL 的端口号。
assign方法：加载新的文档

三、DOM-文档对象模型（->HTML)

document object model

独立于平台和语言的接口（不仅在js可用）
通过他与文档进行连接
运行程序和脚本动态的访问和更新
节点：任一内容均可成为节点：元素节点，文本节点，属性节点，注释节点……
可以将一个HTML文档转变成一个DOM树
（元素节点不包括文本节点）

（一）节点访问

DOM节点关系

childNodes：子节点的集合/数组

var oItems = document.body.childNodes;
for(var i;i<oItems;i++)
{
    console.log("nodeType:"+oItem[i].nodeType);
    console.log("nodeName:"+oItem[i].nodeName);
    console.log("nodeValue:"+oItem[i].nodeValue);
}

parentNode：返回父节点
firstChild，lastChild：第一个，最后一个子节点
nextSibling，previousSibling：下/前一个同胞节点
NodeList：返回一个节点组
动态的属性（对文档结构的修改，会实时反射到NodeList）

（二）节点操作

创建节点
createElement(); //创建元素节点
createTextNode(); //创建文本节点
createComment(); //创建文本节点
文档碎片
appendChild：在很多个子节点最后再插入一个新的节点
insertBefore：在指定节点之前插入一个新的节点
insertBefore( 新节点 , 以前的节点 );
replaceChild：替换已存在的节点
removeChild：移除存在的节点
document：一般用document.来访问节点

获取节点的方式

常用
getElementById();
getElementsByTagName(); //标签名
getElementsByClassName();
getElementsByName();
不常用
querySelector('选择器');
querySelectorAll('选择器'); //获取...里全部的…

（三）attribute属性操作

getAttribute("属性名"); //返回属性的值
getAttribute("属性名")[0]; 返回…的第一个值
setAttribute("属性名","属性值"); //添加属性；若属性名已存在，对其进行修改
removeAttribute("属性名"); //删除属性

（四）文本操作

write(方法)：重绘整个页面
innerHTML(属性)->常用
document.getElementById("id").innerHTML= ··· ;
//得到标签名为“id"的内容/修改从元素的标签开始所有内容
重绘页面的一部分
innerText：只返回标签内部的内容；按行输出，不会用到HTML内的格式
textContent：包括下面的子节点的所有内容；输出格式与HTML内的格式一致

（五）文档碎片

document.createDocumentFragment();
相当于创建一个容器，将节点放进去可以防止节点之间插入节点树上浏览器进行渲染，提高性能

var fragment = document.createDocumentFragment()
for (var i = 0 ; i<1000 ; i++)
{
    var x = document.createElement("span");
    var t=document.createTextNode("i");
    x.appendChild(t);
    fragment.appendChild(x);
}
document.body.appendChild(fragment);

（六）元素遍历

childElementCount：返回元素子节点的个数
nextElementChild：返回第下一个元素节点（可以跳过换行的空）
firstElementChild
lastElementChild
previousElementChild

（七）访问样式

element.style.color=“red”；
style的属性要用驼峰式命名

（八）计算的样式

element.style.无法访问外联样式表里的样式
document.defaultView.getComputedStyle(DOM元素，伪类/null)

（九）DOM事件

事件流

捕获过程：x标签被点击，由window-document-< html >-< body >-< div >-< x.father标签 >
冒泡过程：由该标签的父元素向上
触发过程：点击x标签

一定会有触发过程，捕获和冒泡有一种

事件处理

（eg.click事件，mouseover事件；响应，处理事件的函数）

on(html)：<…… “函数/函数名（函数体放js里）”>
on(js)

DOM零级事件处理程序

定义对象获取某一节点，节点.onxxx=function{……}；
删除一个事件 id.onxxx=null；
对同一元素多次处理，只执行最后一次的fun，执行最后一次的内容

DOM二级事件处理程序

addEventListener：添加事件监听（可以多次添加）
变量.addEventListener(事件名，事件处理函数，布尔值);
//布尔值默认-false-事件在冒泡阶段执行
removeEventListener：删除事件监听
变量.removeEventListener（事件名，函数名，布尔值）;
//布尔值默认-false-在冒泡阶段移除
匿名函数不能通过该函数删除（方法：添加个事件名)