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

javascript系统系列 专栏收录该内容
7 篇文章 1 订阅

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

  • 1
    点赞
  • 2
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p style="font-size:16px;"> <span style="color:#7030A0;"><strong>本课程为 <span style="color:#FFFF00;background-color:#FF0000;">2020年</span> 新版</strong></span><span style="color:#7030A0;"><strong>录制,非常适合初学者JavaScript视频课程,全面讲解<span style="color:#FFFF00;background-color:#FF0000;">JavaScript技术</span>,一站式学习,让你少走弯路,直达技术前沿!</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:20px;"><strong><span>以通俗易懂方式全面讲解JavaScript技术,以知识讲解+实战案例方式帮您快速入</span></strong><strong><span>门!</span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;font-size:18px;"><br /> </span> </p> <p style="font-size:16px;"> <strong><span style="font-size:18px;">课程内容包括</span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;">1.JavaScript简介</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">2.<span style="color:#313D54;">JavaScript基本用法</span></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">3.变量和数据类型</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">4.运算符</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">5.数据类型转换</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">6.选择结构、循环结构</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">7.数组、函数</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">8.Debug调试</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">9.DOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">10.事件处理</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">11.BOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">12.自定义对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">13.原型prototype</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">14.内置对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">15.客户端存储Cookie、WebStorage</span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><span style="color:#FF0000;"></span></strong><strong><span style="color:#FF0000;">教学全程采用<span style="font-size:20px;color:#00B050;">笔记+代码案例</span>形式讲解,每个知识点都有详细讲解,通俗易懂!!!</span></strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090258436919.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259007133.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259114218.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259291679.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259474844.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259582372.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;font-size:24px;"><strong>全网500万学员选择,好评如潮,专业更值得信赖......</strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><img src="https://img-bss.csdnimg.cn/202008090300125864.jpg" alt="" /><br /> </strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong>讲师介绍</strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong><img src="https://img-bss.csdnimg.cn/202008090303376757.jpg" alt="" /><br /> </strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><br /> </strong></span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值