js dom对象

一、 dom 介绍

HTML DOM (文档对象模型) {docsify-ignore}

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

dom结构

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM 节点

在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

二、 dom 查找

1. getElement 系列：

方法	描述
document.getElementById("idName")	返回带有指定 id 的第一个对象的引用。
document.getElementsByClassName("className")	返回带有指定 class 的对象集合。
document.getElementsByTagName("p")	返回带有指定标签名的对象集合。
document.getElementsByName("username")	返回带有指定名称的对象的集合

返回一个节点或者一个类数组的节点集合，HTMLCollection对象(动态的 NodeList 对象)

2. querySelector 系列：

方法	描述
document.querySelector("p")	获取文档中第一个 `<p>` 元素
document.querySelector("#id")	获取文档中指定 id 的元素
document.querySelector(".class")	获取文档中第一个指定 class 的对象
document.querySelector("input[type='text']")	获取文档中有 `type='text'` 属性的第一个 `<input>` 元素：
document.querySelectorAll("p")	获取文档中所有 `<p>` 元素
document.querySelectorAll("#id")	获取文档中所有指定 id 的元素
document.querySelectorAll(".class")	获取文档中所有指定 class 的对象
document.querySelectorAll("input[type='text']")	获取文档中有 `type='text'` 属性的所有 `<input>` 元素：

3. getElement 和 querySelector

getElement系列返回一个节点或者一个类数组的节点集合，HTMLCollection 对象（动态的 NodeList 对象）。动态的 Node List，每一次调用 li 都会重新对文档进行查询，导致无限循环的问题。 querySelector系列返回一个节点或者一个类数组的节点集合，静态 NodeList 对象。静态的 Node List，是一个 li 集合的快照，对文档的任何操作都不会对其产生影响。

什么是 NodeList？

本质上是一个动态的 Node 集合，只是规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。

什么是 HTMLCollection？

HTMLCollection 和 NodeList 十分相似，都是一个动态的元素集合，每次访问都需要重新对文档进行查询。两者的本质上差别在于，HTMLCollection 是属于 Document Object Model HTML 规范，而 NodeList 属于 Document Object Model Core 规范。

4. 两者的区别

NodeList 对象会包含文档中的所有节点，如 Element、Text 和 Comment 等。HTMLCollection 对象只会包含文档中的 Element 节点。另外，HTMLCollection 对象比 NodeList 对象多提供了一个 namedItem 方法。

三、 dom document

以下是常用的 Document 对象属性和方法

属性 / 方法	描述
document.body	返回文档的 body 元素
document.createAttribute()	创建一个属性节点
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.documentElement	返回文档的根节点
document.documentURI	设置或返回文档的位置
document.URL	返回文档完整的 URL
document.images	返回对文档中所有 Image 对象引用
document.normalize()	删除空文本节点，并连接相邻节点
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符

四、 dom 元素

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象的子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList 对象 代表了节点列表，类似于 HTML 元素的子节点集合。

常用的 HTML 元素的属性和方法

属性 / 方法	描述
element.appendChild()	为元素添加一个新的子元素
element.attributes	返回一个元素的属性数组
element.childNodes	返回元素的一个子节点的数组
element.children	返回元素的子元素的集合
element.childElementCount	返回子元素节点的个数
element.classList	返回元素的类名，作为 DOMTokenList 对象。
element.className	设置或返回元素的 class 属性
element.cloneNode()	克隆某个元素
element.firstChild	返回元素的第一个子节点
element.lastChild	返回的最后一个子元素
element.focus()	设置文档或元素获取焦点
element.getAttribute()	返回指定元素的属性值
element.getAttributeNode()	返回指定属性节点
element.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回 false。
element.hasAttributes()	如果元素有任何属性返回 true，否则返回 false。
element.hasChildNodes()	返回一个元素是否具有任何子元素
element.id	设置或者返回元素的 id。
element.innerHTML	设置或者返回元素的内容。
element.insertBefore()	现有的子元素之前插入一个新的子元素
element.nextSibling	返回该元素紧跟的一个节点
element.nextElementSibling	返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
element.nodeName	返回元素的标记名（大写）
element.nodeType	返回元素的节点类型
element.nodeValue	返回元素的节点值
element.parentNode	返回元素的父节点
element.previousSibling	返回某个元素紧接之前元素
element.previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
element.removeAttribute()	从元素中删除指定的属性
element.removeAttributeNode()	删除指定属性节点并返回移除后的节点。
element.remove()	删除自身节点
element.removeChild()	删除一个子元素
element.replaceChild()	替换一个子元素
element.setAttribute()	设置或者改变指定属性并指定值。
element.setAttributeNode()	设置或者改变指定属性节点。
element.style	设置或返回元素的样式属性
element.tabIndex	设置或返回元素的标签顺序。
element.tagName	作为一个字符串返回某个元素的标记名（大写）
element.textContent	设置或返回一个节点和它的文本内容
element.title	设置或返回元素的 title 属性
element.toString()	一个元素转换成字符串
nodelist.item()	返回某个元素基于文档树的索引
nodelist.length	返回节点列表的节点数目。

nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

元素在页面的位置

属性 / 方法	描述
element.clientHeight	在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.offsetHeight	返回任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent	返回元素的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器
element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）

五、 dom 样式实例

<button>点击添加样式</button>
<button id="remove">移除active类名</button>
<button class="getStyle">获取最终样式</button>
<p>p标签p标签p标签p标签</p>

<script>
  var btn = document.querySelector('button');
  var p = document.querySelector('p');
  //当点击按钮的时候，执行函数
  btn.onclick = function () {
      // 原本带-的属性改成驼峰 font-size
      p.style.color = ' red ';
      // 获取的属性只能获取行内样式 但不一定是最终样式
      console.log(p.style.color);
      // 设置节点的属性
      p.setAttribute('id', 'p1');
      // 设置样式就避免使用这个方法
      p.setAttribute('style', 'color:black');
      //获取节点上的属性
      console.log('获取属性' + p.getAttribute('id'));
      //移除属性
      p.removeAttribute('style');
      //控制类名
      p.className = 'desc';
      //追加激活类
      p.className += ' active';
      console.log(p.className);
      //类名列表  IE10以上能用
      console.log(p.classList)
      //添加类名
      p.classList.add('fz50');
      //移除类名
      p.classList.remove('active');
</script>

六、 dom 节点实例

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>;

var ul = document.querySelector("ul");
// 获取子节点      仅仅找儿子，不带任何条件
console.log("children", ul.children);
// 包含元素节点（标签）和文本节点
console.log("childNodes", ul.childNodes);
// 返回子元素节点的个数
console.log("childElementCount", ul.childElementCount);

// 获取第一个节点，包含文本节点
console.log(ul.firstChild);
// 获取第一个元素节点
var firstChild = ul.firstElementChild;
console.log("firstElementChild", ul.firstElementChild);
// 获取最后一个元素节点
console.log("lastElementChild", ul.lastElementChild);

// 控制下一个兄弟
console.log("下一个", firstChild.nextElementSibling);
console.log("上一个", ul.lastElementChild.previousElementSibling);

// innerText 元素里的文本
firstChild.innerText = "<h1>111222</h1>";

// 如果字符串里面包含html代码，则会渲染成html的结构
// 通常用作字符串模板
firstChild.innerHTML = "<h1>111222</h1>";

// 连标签本身也会被替代掉
firstChild.outerHTML = "<h1>h1标签</h1>";
firstChild.outerText = "<h1>h1标签</h1>";

// 找父节点
console.log("parentElement", firstChild.parentElement);

# js dom对象

# 一、 dom 介绍

# HTML DOM (文档对象模型) {docsify-ignore}

# DOM 节点

# 二、 dom 查找

# 1. getElement 系列：

# 2. querySelector 系列：

# 3. getElement 和 querySelector

# 什么是 NodeList？

# 什么是 HTMLCollection？

# 4. 两者的区别

# 三、 dom document

# 四、 dom 元素

# 元素在页面的位置

# 五、 dom 样式实例

# 六、 dom 节点实例