JS DOM

元素获得

原始方式
1. var x = document.documentElement;
2. var x = document.body;
3. var x = document.getElementById(“aBC”)
4. var x = document.getElementByTagName(“p”)

选择器
1. document.querySelector("div p.red")
2. document.querySelectorAll("div p.red")

遍历DOM树
.parentNode  . children   .firstChild   .lastChild 
.nextElementSibling  .priviousElementSibing

元素创建与删除

1. document.createElement(新)
2. .appendChild(新) .insertBefore(新,item) .replaceChild(新,旧)  .removeChild(旧)  元素.cloneNode()
3. document.createTextNode()
4. document.getElementById('myAnchor').innerHTML="RUNOOB";
5. 父.removeChild(子)

属性获得

元素.attributes   
使用 for(var i=0;i<elem.attributes.length;i++){
  xxx = elem.attributes[i];
}

属性创建与修改

1. .getAttribute(“属性”)  
2. .removeAttribute(“属性名”)  //删除属性及属性值。
3. .setAttribute(“属性名”,”属性值”)  属性不存在,创建;若存在,替换属性值。
4. .style.属性=新样式
    document.getElementById("p2").style.color="blue";

添加事件

1. document.getElementById("myBtn").onclick=function(){myFunction ()};
2. document.getElementById("myBtn").addEventListener("click", myFunction);
注:addEventListener(event, function, useCapture);
useCapture :false冒泡(默认), true捕获
3. element.removeEventListener("mousemove", myFunction);
posted @   波吉国王  阅读(24)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示