原生JavaScript基本知识总结（上）

等）属性节点：HTML元素的属性（如class、id等）文本节点：元素内的文本内容注释节点：HTML注释

DOM级别：

DOM Level 1：定义了文档结构和基本查询方法DOM Level 2：增加了事件模型、样式操作等DOM Level 3：扩展了XPath支持、文档验证等功能

常见DOM操作方法

1. 节点查询

// 通过ID获取元素

document.getElementById('myElement');

// 通过类名获取元素集合

document.getElementsByClassName('myClass');

// 通过标签名获取元素集合

document.getElementsByTagName('div');

// 通过Name属性获取

console.log(document.getElementsByName('name'));

// CSS选择器查询

document.querySelector('#container .item'); // 返回第一个匹配元素

document.querySelectorAll('.menu-item'); // 返回所有匹配元素

2. 节点操作

// 创建新元素

const newDiv = document.createElement('div');

// 添加/移除子节点

parentElement.appendChild(newDiv);

parentElement.removeChild(existingDiv);

// 插入节点

parentElement.insertBefore(newDiv, referenceElement);

// 替换节点

parentElement.replaceChild(newDiv, oldDiv);

3. 类名操作

document.getElementById('id').className，该属性内容会直接改变dom元素上class的值;

console.log(document.getElementById('id').className);

// 设置类名

document.getElementById('id').className='myclass';

// 设置多个类名，中间用空格隔开

document.getElementById('id').className='myclass1 myclass2';

// 清空类名，设置为空

document.getElementById('id').className='';

4. 属性操作

// (1)、获取节点列表（查找）querySelectorAll

var myNodeList = document.querySelectorAll("div");

console.log(myNodeList); // 返回一个节点数组（body下面所有的div元素）

// (2)、修改样式：所有的div元素背景颜色设置为红色

var myNodelist = document.querySelectorAll("div");

for (var i = 0; i < myNodelist.length; i++) {

myNodelist[i].style.backgroundColor = "red";

}

// (3)、修改节点文本 innerHTML

document.getElementById('id').innerHTML = 'Hello world!';

// (4)、修改节点元素样式 style

document.getElementById('id').style.display = 'none';

// (5)、在body中创建节点并在其中添加文本 appendChild 尾部添加

var newdiv = document.createElement('div'); // 创建元素节点

var newtext = document.createTextNode('Hello world!'); // 创建文本节点

newdiv.appendChild(newtext);

document.body.appendChild(newdiv);

// (6)、插入节点：将新元素添加到开始位置 insertBefore 起始位置添加

var node = document.getElementById("id");

var child = document.getElementById("p1");

node.insertBefore(child);

// (7)、获取子节点列表 childNodes

var element = document.getElementById('id');

var childNodes = element.childNodes;

// (8)、删除子节点（只能是父级删子级）removeChild

element.removeChild(childNodes[0]);

// (9)、替换子节点 replaceChild

var para = document.createElement("p");

var text = document.createTextNode("新建文本");

para.appendChild(text);

var parent = document.getElementById("id");

var child = document.getElementById("p1");

parent.replaceChild(para,child);

DOM事件处理

事件监听：

// 传统方式

element.onclick = function() { /* 处理逻辑 */ };

// 现代方式（可添加多个监听器）

element.addEventListener('click', function(event) {

console.log('元素被点击了', event.target);

});

// 移除监听器

const handler = function() { /* ... */ };

element.addEventListener('click', handler);

element.removeEventListener('click', handler);

事件传播：

捕获阶段（从window向下到目标元素）目标阶段（在目标元素上触发）冒泡阶段（从目标元素向上到window）

// 第三个参数决定使用捕获(true)还是冒泡(false)

element.addEventListener('click', handler, true);

性能优化建议

减少DOM操作：

批量修改时使用documentFragment

const fragment = document.createDocumentFragment();

for(let i=0; i<100; i++) {

const item = document.createElement('div');

fragment.appendChild(item);

}

document.body.appendChild(fragment);

事件委托：

// 在父元素上监听子元素事件

document.getElementById('list').addEventListener('click', function(e) {

if(e.target.classList.contains('item')) {

// 处理项目点击

}

});

避免强制同步布局：

分离读写操作，减少浏览器重排

现代DOM API扩展

MutationObserver：

const observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

console.log('DOM发生了变化', mutation);

});

});

observer.observe(document.body, {

attributes: true,

childList: true,

subtree: true

});

IntersectionObserver：

const io = new IntersectionObserver(function(entries) {

entries.forEach(entry => {

if(entry.isIntersecting) {

console.log('元素进入视口', entry.target);

}

});

});

io.observe(document.querySelector('.lazy-load'));

DOM是现代Web开发的核心技术之一，几乎所有前端框架（如React、Vue等）都在其底层使用DOM操作来更新用户界面，虽然这些框架提供了更高级的抽象，但理解DOM的工作原理对于解决复杂问题和性能优化仍然至关重要。

浏览器对象模型（BOM）

浏览器对象模型（Browser Object Model，简称BOM）是JavaScript与浏览器交互的核心接口，它提供了独立于文档内容而与浏览器窗口进行交互的对象和方法。BOM允许开发者访问和操作浏览器窗口本身，而不仅仅是网页内容。

主要BOM对象

Window对象

作为BOM的顶层对象，Window表示浏览器窗口或框架。它是所有其他BOM对象的父对象，也是全局对象。主要功能包括：

控制窗口大小和位置（resizeTo(), moveTo()）打开/关闭新窗口（open(), close()）设置定时器（setTimeout(), setInterval()）访问文档对象（document属性）示例：window.innerWidth获取视口宽度

Navigator对象

提供浏览器及其功能的信息，常用于检测浏览器类型和版本：

navigator.userAgent：浏览器用户代理字符串navigator.platform：操作系统平台navigator.language：浏览器语言设置navigator.geolocation：地理位置API示例：if(navigator.cookieEnabled) { /* 处理cookie */ }

Screen对象

包含用户屏幕显示的信息：

screen.width/screen.height：屏幕分辨率screen.availWidth/screen.availHeight：可用显示区域screen.colorDepth：色彩深度示例：screen.orientation检测屏幕方向

History对象

管理浏览器会话历史记录：

history.length：历史记录数量history.back()/history.forward()：导航history.go(n)：跳转到特定历史记录现代SPA应用中常用pushState()/replaceState()进行无刷新路由示例：history.pushState({page: 1}, "title", "?page=1")

Location对象

包含当前URL信息并控制导航：

location.href：完整URLlocation.protocol：协议（http/https）location.host：主机名和端口location.pathname：路径location.search：查询字符串location.hash：片段标识符方法：assign(), reload(), replace()示例：location.search = "?page=2"修改查询参数

Web存储API

现代浏览器提供了两种客户端存储机制：

localStorage

持久化存储，数据不会过期存储容量较大（通常5-10MB）作用域为协议+域名+端口方法：

setItem(key, value)getItem(key)removeItem(key)clear()key(index)

适用场景：用户首选项、长期缓存数据示例：

localStorage.setItem("theme", "dark");

const theme = localStorage.getItem("theme");

sessionStorage

会话级存储，标签页关闭时清除存储容量与localStorage类似作用域为单个标签页方法同localStorage适用场景：敏感临时数据、单次会话状态示例：

sessionStorage.setItem("formData", JSON.stringify(formValues));

const data = JSON.parse(sessionStorage.getItem("formData"));

注意事项

存储数据大小有限制，需处理QuotaExceededError存储的是字符串，复杂对象需序列化同源策略限制访问敏感信息不应存储在客户端可通过storage事件监听变化

BOM提供了丰富的接口让JavaScript能够与浏览器环境深度交互，是Web开发中不可或缺的重要组成部分。