一文秒懂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的常见兼容问题及相关解决方法(chrome/IE/firefox)
本篇文章只要是对JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
通过本文带领大家一起重新理解JavaScript的六种继承方式,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
深入理解javascript作用域第二篇之词法作用域和动态作用域
这篇文章主要介绍了javascript作用域第二篇之词法作用域和动态作用域的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了webpack构建下换肤功能的思路详解,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了ReactHooks+ts函数组件实现原生轮播，在这里下载依赖第一个是js依赖第二个是ts依赖，通过实例代码介绍了创建tsx文件的方法,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Bootstrap下拉菜单实例代码的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
这篇文章主要为大家详细介绍了Bootstrap标签页（Tab）插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
jscript之List Excel Color Values
jscript之List Excel Color Values...2007-06-06
JS常见疑难点分析之match，charAt，charCodeAt，map，search用法分析
这篇文章主要介绍了JS常见疑难点分析之match，charAt，charCodeAt，map，search用法,结合实例形式较为详细的分析了match，charAt，charCodeAt，map，search的功能,使用方法与相关注意事项,需要的朋友可以参考下2016-12-12
最新评论