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) + '毫秒')

})()
相关文章
|
1天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
1天前
|
Web App开发 JavaScript 前端开发
js 调试—— 【控制台】debugger语句 、 命令行API
js 调试—— 【控制台】debugger语句 、 命令行API
7 0
|
2天前
|
API 开发工具
支付系统17------支付宝支付-----API预览以及签名验签说明,出现支付宝扫描二维码的操作,支付完成之后,查询订单的状态,支付成功之后,需要退款调用的接口,退款状态的接口,完成退款之后,通知
支付系统17------支付宝支付-----API预览以及签名验签说明,出现支付宝扫描二维码的操作,支付完成之后,查询订单的状态,支付成功之后,需要退款调用的接口,退款状态的接口,完成退款之后,通知
|
2天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
|
2天前
|
监控 JavaScript 前端开发
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
11 0
|
2天前
|
JavaScript 前端开发 API
JS案例:前端Iframe及Worker通信解决思路
JS案例:前端Iframe及Worker通信解决思路
|
2天前
|
JavaScript 前端开发
JS进阶篇(前端面试题整合)(三)
JS进阶篇(前端面试题整合)(三)
12 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:箭头函数的意义
前端 JS 经典:箭头函数的意义
5 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:变量交换
前端 JS 经典:变量交换
5 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:函数签名
前端 JS 经典:函数签名
6 0