2020 原生JS - DOM操作

DOM 选择器

 // 1. 通过ID获取
document.getElementById('id') // 必须传参数,参数是string类型,是获取元素的id,返回值只获取到一个元素,没有找到返回null
// 2. 通过name属性
document.getElementsByName('name')  // 必须传参数,参数是是获取元素的name属性, 返回值是一个类数组,没有找到返回空数组
// 3. 通过标签名
document.getElementsByTagName('div')  // 参数是是获取元素的标签名属性,不区分大小写, 返回值是一个类数组,没有找到返回空数组
// 4. 通过类名
document.getElementsByClassName('className')  // 参数是元素的类名,返回值是一个类数组,没有找到返回空数组
// 5 通过选择器获取一个元素
document.querySelector('id class 等等') // 参数是选择器,如:”div .className”,返回值只获取到第一个元素
// 6. 通过选择器获取一组元素
document.querySelector('css选择器') // 参数是选择器,如:”div .className”,返回值是一个类数组
// 7.获取html的方法(document.documentElement)
document.documentElement // 是专门获取html这个标签的
// 8. 获取body的方法(document.body)
document.body是专门获取body这个标签的。

nodeType

nodeType == 1 表示的是元素节点(标签) 记住:元素就是标签。

nodeType == 2 表示是属性节点 

nodeType == 3 是文本节点 

DOM操作

1. 新增

var div = document.createElement("div");

2. 插入

 父节点.appendChild(新的子节点);  // 父节点的最后插入一个新的子节点
 父节点.insertBefore(新的子节点,作为参考的子节点); // 在参考节点前插入一个新的节点如果参考节点为null,那么他将在父节点最后插入一个子节点
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是DOM D(document)O(object)M(model) 文档对象模型。 MDN的解释:DOM(文档...
    lyp82nkl阅读 443评论 0 0
  • 文本整理了javascript操作DOM的一些常用API,根据其作用整理成为创建,修改,查询等多种类型的API,主...
    饥人谷__冯国欣阅读 372评论 0 0
  • ### DOM数 > dom tree > 当浏览器加载HTML页面的时候,首先就是DOM结构的计算,计算出来的D...
    路上灵魂的自由者阅读 3,415评论 0 0
  • 一、理解 DOM 1. DOM 定义 DOM 的全称是" Document Object Model ",中文意思...
    养乐多__阅读 2,094评论 0 1
  • 目录 1. 基本概念 1.1 Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这...
    王童孟阅读 436评论 0 1