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

DOM及其基础操作

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

获取DOM元素的方法

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

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

节点：Node（页面中所有的东西都是节点）
节点集合： 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

描述节点之间的关系的属性

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中动态增删改元素

createElement 创建元素对象
createTextNode 创建文本对象
appendChild 把元素添加到容器的末尾
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([新增元素],[指定元素])

cloneNode(true) 克隆元素或者节点
removeChild 移除容器中的某个元素

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

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

总结

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

javascript基础系列：DOM相关的技术知识点相关推荐

javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
javascript基础系列：javascript中的变量和数据类型（一）
javascript基础系列:javascript中的变量和数据类型(一) 今天开始去重新系统温习一遍js基础,并作下记录 javascript是由三部分组成: ECMASCRIPT(ES): 描述了 ...
JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
【JavaScript基础系列】决定你的人生能走多远的，是基础。
前言 javaScript门槛非常低,一点语法,一个dom,一个bom就可以使用它开发大部分js应用,再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式,但是我们始终不能忘记的一点 ...
axios学习笔记（一）：学习HTTP相关的技术知识点
**HTTP是一种能够获取如 HTML 这样的网络资源的 **protocol(通讯协议).它是在 Web 上进行数据交换的基础,是一种 client-server 协议,也就是说,请求通常是由像浏览 ...
JavaScript基础系列之五浏览器
JavaScript基础系列之五浏览器浏览器由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的. 目前主流的浏览器分这么几种: IE ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
javascript基础系列：数组常用方法解析
javascript基础系列:数组常用方法解析今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...