常見DOM操作

建立元素節點

var odiv = document.createelement("div");   //建立乙個div

var op = document.createelement("p");       //建立乙個p標籤

var otext = document.createtextnode("文字資訊");

div

divdiv
段落

var odiv = document.getelementbyid("box");

var adiv = document.getelementsbytagname("div");

adiv[0].innertext = "給第乙個div標籤修改內容";

var atest = document.getelementsbyclassname("test");

atest[1].innertext = "給第二個類名為test的標籤修改內容";

var ade = document.getelementsbyname("de");

var odiv = document.queryselector("#box");  //一般用於通過id名查詢

var adiv = document.queryselectorall(".test");  //用於括號內查詢

div

divdiv
段落

var ospan = document.createelement("span");

var odiv = document.getelementbyid("box");
document.body.replacechild(ospan,odiv);

var odiv = document.getelementbyid("box");

var op= document.queryselectorall("p")[0];
document.body.replacechild(op,odiv);      //挪位置
var clonenode = op.clonenode(true);
document.body.replacechild(clonenode,odiv);

var odiv = document.getelementbyid("box");

var op= document.queryselectorall("p")[0];
document.body.removechild(op);

常見dom樹操作

js操作dom節點 1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 element sdocument.getelementsbytagnam...

常見的dom操作

p標籤 查 查詢dom節點 查詢元素節點p的屬性返回屬性名稱對應的屬性值 ipt attr title 返回p的屬性title的值。var ipt ipt attr title console.log ipt 20 建 新建dom節點 建立元素節點並且把節點作為元素的子節點新增到dom節點樹上。先建...

JS常見的DOM操作API

目錄 幾種物件 node nodelist htmlcollection 節點查詢api 節點建立api createelement createtextnode clonenode createdocumentfragment 節點修改api insertbefore removechild re...