js获取页面元素

最新推荐文章于 2023-08-01 23:53:41 发布

小鹏没睡

最新推荐文章于 2023-08-01 23:53:41 发布

阅读量700

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/m0_53099736/article/details/121441452

版权

获取页面元素

getElementsByTagName

通过标签名称获取元素

getElementsByClassName

通过class获取元素

getElementById

通过id获取元素

getElementByName

通过name属性来获取元素

querySelector

更简单一点，但是有缺陷
类似css方法来获取元素

操作元素样式和属性

classList 获取class名称
add 添加一个class名称
remove 移除一个class名称

innertText 修改元素内部的文本

innerHTML 修改元素内部的标签+文本

input 操作

value
type 
name 
placeholder

a标签操作

href
target

通用元素的一些属性

自定义属性 data-xxx

dataset
 <li id="li" data-dianjilu="90" data-fenxiang="200"><body>要让中国空军恐惧？中国空军副司令员王伟霸气回应</li>
 <script>
     var data = li.dataset;
 <script>

style属性修改样式

元素节点.style.xxxx

xxx是用小驼峰命名法来定义的属性值

var btn = document.getElementById("btn")
    btn.style.marginLeft="100px"
    btn.style.marginTop="100px"
    btn.style.backgroundColor="red"
    btn.style.border="1px #dbdbdb solid"
    btn.style.color="#fff"

appendChild() 添加子节点

需要下面两个document方法来支持
createElement() 创建元素节点
createTextNode() 创建文本节点

cloneNode(boolean) 克隆节点，值是布尔值

如果是true，就会clone所有的子节点

removeChild() 移除子节点

意味着必须从父级移除

replaceChild(value1,value2) 替换子节点

意味着必须从父级替换
value1,新的节点
value2，旧的节点

小鹏没睡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
js获取页面元素

获取页面元素getElementsByTagName通过标签名称获取元素getElementsByClassName通过class获取元素getElementById通过id获取元素getElementByName通过name属性来获取元素querySelector更简单一点，但是有缺陷类似css方法来获取元素操作元素样式和属性classList 获取class名称add 添加一个class名称remove 移除一个class名称innertText 修改元素内部的
复制链接

扫一扫