JavaScript DOM文件物件

2021-09-11 13:02:48 字數 2763 閱讀 5542

一、節點

文字節點,ie8以下空格節點獲取不到。

元素節點div

屬性節點classidvalue

注釋節點

id="wrap">

class="position">

id="box"

class="box1"

data-title="這也是節點"

abc="133">

你好嗎!!!

id="my-span">這是個spanspan>

這是乙個p標籤p>

這是li標籤1li>

這是li標籤2li>

這是li標籤3li>

ul>

div>

id="box2">

div>

div>

div>

複製**

二、獲取節點

獲取子代節點(動態獲取)。ele.childnodes:文字節點、元素節點。ele.children:只獲取元素節點。

獲取第乙個子代節點。ele.firstchild:返回第乙個包括文字節點和注釋節點。ele.firstelementchild:獲取第乙個元素節點。

獲取最後乙個子代節點。ele.lastchild:獲取到文字和注釋節點。ele.lastelementchild:獲取最後乙個元素節點。

獲取父親節點。ele.parentnode:獲取父親節點。ele.offsetparent:找到定位父級。

下乙個兄弟節點。ele.nextsibling:獲取到下乙個節點,包括文字、注釋節點。ele.nextelementsibling:只獲取元素節點。

上乙個兄弟節點。ele.previoussibling:獲取到下乙個節點,包括文字、注釋節點。ele.previouselementsibling:只獲取元素節點。

獲取子元素節點的數量。ele.childelementcount

三、節點的操作

建立節點:document.createelement('nodename'),放標籤名,建立元素節點,建立節點是document的方法,建立完的節點可以直接進行dom操作。

建立文字節點:createtextnode

刪除節點:parentnode.removechild(node),刪除節點只能從父級開始刪除,不能自己刪除自己。

轉殖節點:clonenode(),轉殖只轉殖元素本身還有元素節點,不會轉殖事件,可以接受乙個布林型別,若是true,則轉殖子孫元素。

替換節點:parentnode.replacechild(new, old),第乙個用來替換新元素,第二個被替換元素。

在節點前新增節點:parentnode.insertbefore(new, old),第乙個用來插入的新元素,第二個在這個元素前插入。

var obox = document.getelementbyid('box'),

ospan = document.getelementbyid('my-span');

obox.onclick = function()

var obox2 = obox.clonenode(true);

console.log(obox2)

複製**

var op = document.createelement('p');

op.innerhtml = '我是乙個p標籤';

op.onclick = function()

var otext = document.createtextnode('我很好!!!');

console.log(otext)

複製**

四、節點屬性

獲取節點屬性。ele.getattribute(key),節點名稱,直接返回值。ele.getattributenode,返回節點物件。

設定節點屬性。ele.setattribute(key, value),不要用數字來當做key。ele.setattributenode(node),node是乙個節點物件。

建立節點物件。document.createattribute("nodename"),建立完之後要設定value值。

刪除節點物件。ele.removeattribute(key)節點型別。1--element--元素節點、3--#text--文字節點、8--#comment--注釋節點、9--document--文件節點。

tagname是只有元素節點才有,nodename是所有節點都有。

var obox = document.getelementbyid('box');

obox.removeattribute('abc');

console.log(document.nodetype);

複製**

javaScript DOM程式設計

1.獲取dom樹的根節點 2.getelementbyid 根據標籤的id獲取標籤元素和getelementsbytagname根據標籤名獲取標籤,返回的是陣列的形式 3.getelementsbynames 根據標籤的name屬性獲取標籤,返回的是陣列形式 有兩個input標籤,因此列印結果是2 ...

JavaScript DOM程式設計

dom document objective model 文字物件模型 例子 clickme 例子 先獲取某一指定的元素節點 再讀指定元素節點的屬性 設定指定元素節點的屬性的值 例子 你喜歡那個城市?你喜歡哪款單擊遊戲?name 先獲取某節點。用childnodes方法獲取指定元素節點的所有子節點。...

javascript DOM 獲取節點

1.獲取元素節點 1.1 通過元素節點的id屬性獲取 語法 document.getelementbyid 元素id屬性的值 例如 1.2 根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列,可以用陣列的方法操作該節點陣列 語法 document.getelementsbytagname ...