JS中常见的DOM操作API--《前端那些事》

简介: JS中常见的DOM操作API

1.Node
Node是一个接口,中文叫节点,很对类型的DOM元素都继承于它,都共同享有相同的基本属性和方法。常见的Node有element、text、attribute、comment、document等(所以要注意节点和元素是有区别的,元素属于节点的一种)
Node有一个属性nodeType标识Node的类型,它是一个整数,其数值分别标识响应的Node类型,
具体如下:
···bash
{

ELEMENT_NODE: 1, // 元素节点
ATTRIBUTE_NODE: 2, // 属性节点
TEXT_NODE: 3, // 文本节点
DATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8, // 注释节点
DOCUMENT_NODE: 9, // 文档
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
NOTATION_NODE: 12,
DOCUMENT_POSITION_DISCONNECTED: 1,
DOCUMENT_POSITION_PRECEDING: 2,
DOCUMENT_POSITION_FOLLOWING: 4,
DOCUMENT_POSITION_CONTAINS: 8,
DOCUMENT_POSITION_CONTAINED_BY: 16,
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32

}

···
2.NodeList
NodeList对象是一个节点的集合,一般有Node.childNodes、document.getElementsByName和document.querySelectorAll返回的;
不过需要注意的是,Node.childNodes和document.getElementsByName返回的NodeList结果是实时的(此时跟HTMLCollection比较类似),而document.querySelectorAll返回的结果是固定的,这一点比较特殊。
举例如下:

var childNodes = document.body.childNodes;
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”

3.HTMLCollection
HTMLCollection是一个特殊的NodeList,标识包含了若干元素(元素顺序为文档流中的顺序),通用集合,它是实时更新的,当其所包含的元素发生改变时,它会自动更新,另外,它是一个伪数组,如果想像数值一样操作它们需要使用Array.protoType.slice.call(nodeList,2)这样调用

4.节点操作的相关API
4.1 节点查找API
1)根据ID查找元素:document.getElementById(‘id’)

查找方式 描述
根据ID查找元素 document.getElementById(‘id’)—如果有多个结果,只返回第一个
根据类名查找 document.getElementByClassName(‘classname’)—返回一个HTMLCollection
根据标签查找元素 document.getElementByTagName----返回一个HTMLColletion
根据元的name属性插查找 document.getElementByName—返回一个NodeList
查找单个Node document.querySelector–返回单个Node,若匹配到多个结果,只返回第一个,IE8+
返回NodeList document.querySelectorAll—返回一个NodeList,IE8+
查找当前页面所有form document. form—返回一个HTMLCollection
4.2 节点创建API
创建元素----父元素.createElement
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

通过createElement创建的元素并不属于document对象,它只是创建出来,并未添加到html文档中,要调用appendChild和insertBefore等方法将其添加到HTML文档中。

创建文本节点------createTextNode

var text = document.createTextNode('我是文本节点')
document.body.appendChild(text)

示例:
假设现有一题目,要求给ul添加1000个li,我们可以使用以下方法

要求给ul添加1000个li

这里是立即执行函数
(function () {
  //为了计时方便
  const timeStart = Date.now();
  var ul = document.getElementById('ul');
  var str = ''
  for (let i = 0; i < 1000; i++) {
    str += '<li>第' + (i + 1) + '子节点</li>';
  }
  ul.innerHTML = str;
  console.log('耗时:' + (Date.now() - timeStart) + '毫秒')

})()

②:

(function () {

  //为了计时方便
  const timeStart = Date.now();
  var ul = document.getElementById('ul');
  for (let i = 0; i < 1000; i++) {
    var li = document.createElement('li')
    li.innerHTML = '我是第' + (i + 1) + '个li元素'
    ul.appendChild(li);
  }
  console.log('耗时:' + (Date.now() - timeStart) + '毫秒')

})()
相关文章
|
3天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
7天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
15 0
|
1天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
3天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
4天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
7天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0
|
7天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
13 0
|
7天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
14 2
|
11天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?