dom对象
document object model
HTML-DOM;CSS-DOM;DOM Core
dom节点:
firstelementchild: window.οnlοad=function (){var
body=document.getElementsByTagName(“body”);
alert(body.firstElementChild.innerHTML);} 第一个
lastelementchild:window.οnlοad=function (){var
body=document.getElementsByTagName(“body”);
alert(body[]0.lastElementChild.innerHTML);}最后一个
window.οnlοad=function (){(上下节点)
var girl=document.getElementById(“girl”);
alert(girl.nextElementSibling.innerHTML);
alert(girl.previousElementSibling.innerHTML);}
操作节点的属性
getattribute(”属性名“):得到属性
var b=document.getElementById(“girl”);
alert(b.getAttribute(“src”));
setattribute(“属性名”,”内容“)
b.setAttribute(“src”,“img/nav7.png”); b.setAttribute(“value”,“取消”);
b.setAttribute(“type”,“button”);
换class名: b.setAttribute(“class”,“a”)
增节点
createelement(p):创建一个标签为p 的新节点
为超链接创建标签: var p=document.createElement(“a”);
p.href = “”;p.innerHTML=“这是一个字”;
alert§;
为p,div,span等创建节点: var p=document.createElement(“div”);
p.innerHTML=“这是一个字”; var
span=document.getElementsByTagName(“span”);
span[0].appendChild§;
用createelement创建a时需要给a一个href属性,创建文档型的标签时不需要给属性了 一般创建节点要和其他操作节点的方法一起使用比如:span.appendChild§;在span后面追加p节点;insertbefore(a,b)把a加到b前面;clonenode(deep),克隆节点,true为深度克隆,faulse为克隆当前的节点
删改节点
x.removeChild(div);删除节点
x.replaceChild(div,p);后面的节点被前面的替换
节点样式
style属性
document.body.style.backgroundColor=“black”;
document.getElementById(“123”).style.fontSize=“50px”; style还可以在HTML中设置一个大的样式然后在街上文件中引用样式,通过换id或者class类名的方式。同时style可以同时设置两个样式不过.id要不一样
classname属性
window.οnlοad=function(){
var aaa=document.querySelectorAll(".aaa");
alert(aaa.innerHTML);
for (var i=0;i<aaa.length;i++) {
aaa[i].className = “aaa1”;}
有时getelementtagname不好用可以用queryselectorall来代替使用
相关文章: