javascript基础系列:DOM相关的技术知识点

106 阅读3分钟

javascript基础系列:DOM相关的技术知识点

DOM及其基础操作

DOM: document object model 文档对象模型,提供一些属性和方法供我们操作页面中的元素

获取DOM元素的方法

  1. document.getElementById() 指定在文档中,基于元素的ID或者这个元素对象
  2. [context].getElementsByTagName() 在指定上下文(容器)中,通过标签名获取一组元素集合
  3. [context].getElementsByClassName() 在指定上下文中,通过样式类名获取一组元素集合(不兼容ie6-8)
  4. [context].getElementsByName() 在整个文档中,通过标签的name属性值获取一组元素集合(在ie中只有表单元素的name才能识别,所以一般只用于表单元素的处理)
  5. document.head/ document.body/docuementElement获取页面中的head/body/html元素
  6. [context].querySelector([selector]) (不兼容ie6-8)在指定的上下文中,通过选择器获取指定的元素对象
  7. [context].querySelectorAll([selector]) (不兼容ie6-8) 在指定的上下文中,通过选择器获取指定的元素集合

js中的节点和描述节点之间关系的属性

  1. 节点:Node(页面中所有的东西都是节点)
  2. 节点集合: NodeList(getElementsByName/querySelectorAll获取的都是节点集合)
  • 元素节点(元素标签)

nodeType: 1 nodeName: 大写的标签名 nodeValue: null

  • 文本节点

nodeType: 3 nodeName: '#text' nodeValue: 文本内容

  • 注释节点

nodeType: 8 nodeName: '#comment' nodeValue: null

  • 文档节点document

nodeType: 9 nodeName: '#document' nodeValue: null

  1. 描述节点之间的关系的属性
  • childNodes: 获取所有的子节点(非ie6-8)中会把空格和换行当做文本节点
  • children: 获取所有的元素子节点(子元素标签)(ie6-8下会把注释也当元素节点)
  • firstChild:获取第一个子节点
  • lastChild: 获取最后一个子节点
  • firstElemeentChild/lastElementChild(不兼容ie6-8)
  • previousSibling: 获取上一个哥哥的节点
  • nextSibling: 获取下一个弟弟节点
  • previousElementSibling/nextElementSibling: 获取兄弟元素节点(不兼容ie6-8)
/**
	* children: 获取指定上下文中,所有元素子节点
  * @params
  * context [element object]指定的上下文元素信息
  * @return
  *  [array] 返回所有的元素子节点集合
**/

function children(context) {
  // 1. 先获取所有的子节点
	var res = [],
      nodeList = context.childNodes
  // 2. 循环遍历所有的子节点,找出元素子节点,存储到res中即可
  for(var i = 0; i < nodeList.length; i++) {
  	var item = nodeList[i];
    item.nodeType === 1? res.push(item) : null
  }
  return res
}

// 获取上一个哥哥元素
function prev(context) {
	var pre = context.previousSibling;
  while(pre.nodeType !== 1) {
  	pre = context.previousSibling;
  }
  return pre;
}

在js中动态增删改元素

  1. createElement 创建元素对象
  2. createTextNode 创建文本对象
  3. appendChild 把元素添加到容器的末尾
  4. insertBefore 把元素添加到指定容器元素的前面
// 动态创建一个div元素对象,把其赋给box
let box = document.createElement('div');
box.id = 'box'
box.style.width = '200px'
box.style.height = '200px'
box.className = 'red'
let text = document.createTextNode('珠峰培训');

// 添加: 容器.appendChild(元素)
box.appendChild(text)
document.body.appendchild(box)

// 放到指定元素前: 容器.insertBefore([新增元素],[指定元素])
  1. cloneNode(true) 克隆元素或者节点
  2. removeChild 移除容器中的某个元素

设置自定义属性的其它方式

setAttribute/getAttribute/removeAttribute 设置/获取/删除属性

总结

今天主要分享DOM相关的技术知识点,如果想了解更多,请扫描二维码,关注公众号 qrcode_for_gh_4d3763fa9780_258 (1).jpg