查詢和編輯節點

2021-08-10 07:45:42 字數 1626 閱讀 3407

1·獲取行內樣式

通過.style 獲取的都是元素的行內樣式,非行內樣式獲取不到

例:var text= document.elementbytagname("p");

text.style.color = "yellow"  對樣式進行設定,有賦值操作

text.style.width;          對樣式進行獲取,沒有賦值操作

2·獲取行內及非行內樣式

window.getcomputedstyle  -------     w3c標準提供的方法,符合w3c標準的瀏覽器通過它獲採樣式

element.currentstyle:  -------      非w3c標準的瀏覽器獲取方法(ie)

可以通過相關屬性來對瀏覽器進行判斷

如果bom物件存在window.getcomputedstyle屬性則為w3c標準瀏覽器 否則為ie瀏覽器

例: var text = document.getelementbyid("p");

if (window.getcomputedstyle)else

text.tagname  ---  獲取標籤名稱

text.innerhtml ---  獲取整個文字結構

text.innertext --- 獲取文字

3·查詢節點

通過父元素去查詢子元素

例:var ul = document.getelementbyid("ul"); (後面的例子通用)

ul.firstchild;空格和換行也會被當做乙個子元素被找到

ul.firstelementchild  只會找到元素節點忽略空格和換行

通過子元素找到父元素

例:var li2 = document.getelementbyid("li2");

li2.parentnode;

通過父元素查詢所有子元素

例:ul.childnodes  返回所有節點 空格 換行

ul.children    只返回當前標籤下的元素節點

返回整個文件

例:ownerdocument

返回前乙個同級節點

例:li2.previoussibling  返回 節點 空格 換行

li2.previouselementsibling  只返回節點

返回後乙個同級節點

例:li2.nextsibling  返回節點 空格 換行

li2.nextelementsibling  只返回節點

4·建立和轉殖節點

createelement()  -----  建立乙個全新的 標籤,不包含任何內容和屬性  

clonenode   ---        複製整元素的全部資訊

clonenode(布林值)---  布林值為true  完全複製     布林值為false 複製標籤 不複製內容

insertbefore()  ----- 在乙個元素之前插入乙個新的元素

引數1:你要新增的元素

引數2:在哪個元素之前插入

5·移除和替換節點

removechild  移除乙個字元素

replacechild()  用乙個心元素去替換另乙個元素 有兩個引數

引數1:新的元素

引數2:想要替換的元素

父節點遞迴查詢和子節點遞迴查詢函式

由於在專案中用到了向上查詢父節點的遞迴查詢和向下查詢子節點查詢的遞迴查詢,由於在實現過程中,寫遞迴查詢的sql函式 花費了較長的時間,所以在此總結一下,兩種遞迴查詢的函式的實現寫法 向下查詢子節點的遞迴查詢 先展示表結構 根據區域查詢對應的下級區域資訊,其中parentid為zoneid對應的下級區...

查詢節點 操作節點 刪除節點

insertbefore 在指定的已有子節點之前插入新的子節點 ul.insertbefore linew,li2 replacechild 該方法用新節點替換某個子節點 兩個引數 replacechild 要插入的節點,被替換的節點 返回被替換的節點 document.body.newnode v...

js獲取節點和編輯的方法

建立新節點 1.建立乙個dom片段 createdocumentfragment 例如 1 var d document.createdocumentfragment 2.建立乙個具體的元素 createelement 例如 1 document.createelement input 3.建立乙個...