BOM和DOM

文章结构

• BOM
• DOM
  • 获取 DOM 节点
  • property 和 attribute
  • DOM 树操作

---

BOM

BOM 即浏览器对象模型，浏览器页面初始化时，会在内存中创建一个全局对象，用来描述浏览器和当前窗口的一些属性与状态。例如：

• navigator 包含浏览器的相关信息
• screen 获取浏览器的宽度、高度
• location 获取网址、协议、path、参数、hash 等
• history 设置让浏览器跳转到哪个地址。

DOM

获取 DOM 节点

// 通过 id 获取
var div1 = document.getElementById('div1'); // 元素

// 通过 tagname 获取
var divList = document.getElementsByTagName('div'); // 集合
console.log(divList.length);
console.log(divList[0]);

// 通过 class 获取
var containerList = document.getElementsByClassName('container'); // 集合

// 通过 CSS 选择器获取
var pList = document.querySelectorAll('p'); // 集合

property 和 attribute

property

DOM 节点就是一个 js 对象，它符合之前讲过的对象的特征：可扩展属性。例如：

var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width); // 获取样式
p.style.width = '100px'; // 修改样式
console.log(p.className); // 获取 class
p.className = 'p1'; // 修改 class

// 获取 nodeName 和 nodeType
console.log(p.nodeName);
console.log(p.nodeType);

attribute

var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('data-name');
p.setAttribute('data-name', 'juejin');
p.getAttribute('style');
p.setAttribute('style', 'font-size:30px;');

property 和 attribute 两种的区别：

• property 的获取和操作，是直接改变 js 对象。
• attribute 是直接改变 HTML 的属性（**即对 HTML 属性的get和set**）。而且，get 和 set Attribute 时，还会触发 DOM 的查询和浏览器的重绘与重排，频繁操作会影响页面性能。

DOM 树操作

• 新增节点

// 获取待新增节点
var div1 = document.getElementById('div1');

// 创建新增节点
var p1 = document.createElement('p');
p1.innerHTML = 'Hello, world';

// 将新增节点增加至待新增节点
div1.appendChild(p1);

// 移动节点 这里是移动，不是拷贝
var div2 = document.getElementById('div2');
div1.appendChild(div2);

• 获取父元素

// 获取待新增节点
var div1 = document.getElementById('div1');

var parent = div1.parentelement;

• 获取子元素

// 获取待新增节点
var div1 = document.getElementById('div1');

var child = div1.childNodes;

• 删除节点

// 获取待新增节点
var div1 = document.getElementById('div1');

var child = div1.childNodes;
var firstChild = child[0];
div1.removeChild(firstChild);

• 获取前一个节点和获取后一个节点