本篇文章给大家分享的是有关怎么在JavaScript中操作DOM,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
JavaScript是一种动态类型,弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端网络开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如节点。js .
DOM概念
: DOM文档对象模型:文档对象模型
通过js去操作HTML的代码,添加元素,删除元素…
获取元素
(1) getElementById通过id获取,获取到的是一个元素
(2) getElementsByTagName通过标签名获取,获取到的是一个元素集合(数组)
(3) getElementsByClassName通过类获取,获取到的是一个元素集合(数组)
(4) getElementsByName通过名字属性获取,获取到的是一个元素集合(数组)
<强>总结:获取元素可以根据标签名,id、类名属性来获取.Id获取的结果是一个元素,而其他获取的是一个集合。
文档对象支持以上四种,而元素对象仅支持
getElementsByTagName 和 getElementsByClassName
修改元素
(1)修改内容
通过innerText属实现性读取或设置标签内部的文本
可以用innerHTML属性读取或设置标签内部的文本
两个区别:innerHTML会按照HTML的规则解析文本,而innerText只实现是当作普通的文本内容。
(2)修改样式
: xxx.style.yyy
b: xxx。classname="……”(相当于修改了类属性)
添加删除元素
(1) createElement创建一个元素节点
createElement (p)创建一个段落
(2) createTextNode创建一个文本节点
createTextNode(“文本内容”)创建一个值为“文本内容”的文本节点
(3)列表末尾添加子节点
(4) removeChild删除子节点
导航
文档:根节点
parentNode:获取父节点
子节点的时候存在缺陷:获取所有的子节点
写上:第一个子节点
lastChild:最后一个子节点
以上就是怎么在JavaScript中操作DOM,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
