dom元素获取
查找元素的函数
geteelementById() 朝朝唯一一个元素
getelementsbyclassname()查找指定的class元素
getelementbytagname()查找指定标签名的元素
document.getElementById("myDiv").getElementsByTagName("input") 在元素内部查找指定元素
document.getElementById("myDiv").getElementsByClassName("mycls") 在元素内部查找指定元素
查找dom树
查找元素的属性
dom树中 根据节点关系查找
子节点
children 所有子节点(集合)
firstElementChild 元素
lastElementChild 元素
兄弟(同级)节点
nextElementSibling 下一个兄弟(同级)节点
previousElementSibling 上一个兄弟(同级)节点
父节点
parentElement 父元素节点
js属性操作
元素.属性
函数形式操作属性
Attribute 属性
Properties 属性
读属性
getAttribute("属性名")
写属性
setAttribute("属性名","属性值")
true) bol值决定子节点是否赋值 默认值false
删除元素
function addEle(){
//js创建元素
//先生成虚拟dom结构
//可以设置其中各种属性
let newEle = document.createElement("li");
//简化dom操作
//innerHTML可以解析html标签
newEle.innerHTML ="<input type='button' value='test'/>";//可以解析html标签
// let newBtn = document.createElement("input");
// newBtn.type="button";
// newBtn.value = "新按钮";
// newEle.appendChild(newBtn)
//渲染
document.getElementById("myUl").appendChild(newEle);
function delEle(){
document.getElementById("myUl").removeChild(document.getElementById("myUl").firstElementChild);
}
1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成
2.删除 用原生api实现
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析