一文秒懂JavaScript DOM操作基础
DOM概念
DOM：document object model : 文档对象模型
通过js去操作HTML的代码，添加元素，删除元素。。。
获取元素
（1）getElementById 通过id获取，获取到的是一个元素
（2）getElementsByTagName 通过标签名获取，获取到的是一个元素集合（数组）
（3）getElementsByClassName 通过class获取，获取到的是一个元素集合（数组）
（4）getElementsByName 通过name属性获取，获取到的是一个元素集合（数组）
总结：获取元素可以根据标签名、id、class、name属性来获取。Id获取的结果是一个 元素，而其他获取的是一个集合。
document对象支持以上四种，而element对象仅支持
getElementsByTagName和getElementsByClassName
修改元素
（1）修改内容
通过innerText属性读取或设置标签内部的文本
可以用innerHTML属性读取或设置标签内部的文本
两个区别：innerHTML会按照HTML的规则解析文本，而innerText只是当作普通的文本 内容。
（2）修改样式
a：xxx.style.yyy
b：xxx.classname = “……”（相当于修改了class属性）
添加删除元素
（1）createElement 创建一个元素节点
createElement（“p”）创建一个段落
（2）createTextNode创建一个文本节点
createTextNode(“文本内容”)创建一个值为“文本内容”的文本节点
（3）appendChild 添加子节点
（4）removeChild 删除子节点
导航
Document：根节点
parentNode： 获取父节点
childNodes： 获取所有的子节点
firstChild：第一个子节点
lastChild：最后一个子节点
到此这篇关于JavaScript DOM操作基础的文章就介绍到这了,更多相关JavaScript DOM基础内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文为大家介绍下Javascript中如何得到中英文混合字符串的长度，下面有个不错的教程，感兴趣的朋友可以参考下2014-01-01
这篇文章主要为大家详细介绍了纯js实现打字机效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最近面试有道题是至少写出 15 个数组方法，数组方法平时经常用到的也就6-7个，突然要一下子写出15个，还是有点卡壳了，今天整理一波，需要的可以参考一下2022-05-05
JavaScript中find()和 filter()方法的区别小结
js中find和filter方法大家在工作中会经常遇到,那么他们有什么区别呢？这篇文章主要给大家介绍了关于JavaScript中find()和 filter()方法区别的相关资料,需要的朋友可以参考下2021-12-12
使用GruntJS链接与压缩多个JavaScript文件过程详解
怎么把多个JS文件搞成一个啊，GruntJS – JavaScript多文件编译，风格检查，链接与压缩神器，使用过程如下，有需要的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了JavaScript错误处理机制的相关资料，文中讲解非常细致，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-08-08
这篇文章主要给大家介绍了关于微信小程序实现自动播放视频模仿gif动图效果的相关资料,通过本文介绍的方法可以实现自动播放视频，视频无控制条无声音且自动循环播放,需要的朋友可以参考下2021-07-07
Kotlin学习第一步，从kotlin语法特性开始学习，包括变量定义、函数扩展、Parcelable序列化、编写工具类等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
js操作cookie想必大家并不陌生吧，本文积累了一点小经验，在此与大家分享下，希望对大家有所帮助2013-09-09
这篇文章主要给大家介绍了关于JS浮点数运算结果不精确的Bug解决，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
最新评论