国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

屬性 元素的內容 創建，插入和刪除節點 虛擬節點

kevin / 2983人閱讀

摘要：屬性元素由一個標簽和一組稱為屬性的名值對組成。刪除和替換節點方法重文檔樹中刪除一個節點。將會刪除節點的子節點的節點方法刪除一個子節點并用一個新的節點取而代之，在父節點上調用該方法。

屬性

html元素由一個標簽和一組稱為屬性的名/值對組成。

HTML

表示HTML文檔元素的HTMLElement對象定義了讀/寫屬性。映射了元素的HTML屬性。HTMLElement定義了通用的HTTP屬性。以及事件處理程序的屬性。特定的Element子類型為其元素定義了特定的屬性。
舉個栗子

js如下

var image = document.getElementById("myimage"); // 獲取id為myimage的元素
var imagurl = image.src     // 獲取該元素的imagurl

控制臺輸入如下

imagurl
"http://1.198.105.7/image/1.png"

成功獲取了img元素的src地址
下面為一個form元素設置表單屬性

var f = document.forms[0];    // 獲取第一個form元素
f.action = "./submit/"  // 設置提交地址
f.method = "POST";  // 設置提交方式為post提交

設置完成，提交表單

http://1.198.105.7/submit/

鏈接跳轉到上方地址，接著查看瀏覽器，查看提交的post數據即可查到提交的post數據

ps 不能在頭部引入，會出現找不到DOM節點的情況，請在文末引入
獲取和設置非標準的HTML屬性 
現在說的是一個html的屬性，即HTMLElemnent對象定義的html的一些屬性
Element.getAttribute()

該屬性的獲取傳入屬性的屬性值。
將會返回一個字符串

image.getAttribute("src")
"./image/1.png"
數據集屬性

可以在元素上添加屬性，然后能通過js讀取其數據
h5在Elemnent對象上定義了dataset屬性，該屬性指代一個對象，它的各個屬性對于去掉前綴的data-屬性，因此dataset.x的應該保存為data-x屬性的值，如果后方有字符串，將會按照駝峰命名法命名data-jquery-test將會辦成dataset。jqueryTest
下面生成一個火花線
html如下所示


    1 1 1 2 2 3 4 5 5 4 3 5 4 3 5 3 6 2 4 5 2 4

var sparkLines = document.getElementsByClassName("sparkLine");
for (var i = 0; i < sparkLines.length; i++) {
    var dataset = sparkLines[i].dataset;    // 將自定義的屬性保存在dataset中
    var ymin = parseFloat(dataset.ymin);    // 將ymin字符轉換為浮點數進行存儲
    var ymax = parseFloat(dataset.ymax);    // 同理獲取最大值
    var data = sparkLines[i].textContent.split(" ").map(parseFloat);    // 獲取節點的內容，依照空格進行分割，并將值依次轉換為數值
    console.log(data);
}

可以看到控制臺已經輸出一個數組了。

作為attr節點的屬性

一種使用Element的屬性的方法。Node類型定義了attributes屬性。針對非Element對象任何節點。該屬性為null。
獲取屬性的
舉例子

document.body.attributes[0];    // 獲取第一個body的第一個屬性
document.body.attributes.bgcolor;   // 獲取bgcolor屬性
document.body.attributes["NOLOAD"]  // 獲取元素的onload屬性 因為會自動轉為大寫故因此。
元素的內容 作為HTML的元素內容

以標簽作為分隔

This is the element content!

beforebegin     afterbegin              beforeend   afterend

獲取內容，上方的是插入元素的內容

nodeList[0].innerHTML
以及
nodeList[0].textContent
該兩個方法相同

使用innerHTML可以獲取元素的內容
同樣也可以使用這個方法進行更改

nodeList[0].innerHTML = "hello word"

將會把頁面內容更改為hello word

script元素中的文本

內聯的script元素，有一個text屬性能來獲取它們的文本，該文本存在于樹中，但是并不會將其顯示出來

作為text節點的元素內容

另一中方法處理元素的內容是當做一個子節點列表。每個子節點可能有它自己的一組子節點。
假設html如下

hello word
nodeList[0].innerHTML
"hello word"
nodeList[0].textContent;
"hello word"

上方代碼很明顯的看到innerHTML會返回其中的HTML代碼，包括標簽
但是textContent不會，會把所有的內容統統返回

插入元素內容

有兩個定義好的api分別是element.insertAdjacentHTML 以及 Element.insertAdjacentText()
這兩個元素內容

element.insertAdjacentHTML()

這個會將文本解析為html或者xml，并且將結果插入指定的DOM樹的位置。因為它不會重新解析正在使用的元素，因此它不會破壞元素內的現有元素。將會避免額外的序列化步驟，比直接innerHTML將會快很多。

document.getElementById("myimage").insertAdjacentHTML("beforebegin", html)

完成了一次在前方的插入一個div的節點。
此節點插入的html會被html解析器進行解析，如果用戶插入請務必進行轉義，防止小白攻擊法

Element.insertAdjacentText()

這個僅僅是插入文本，建議一般使用這個，將不會產生dom樹的解析

var h = document.getElementById("myH2");
h.insertAdjacentText("afterend", "My inserted text");

這樣就完成了，一次dom節點的更新
即使插入

h.insertAdjacentText("afterend", "
")

也不會被dom解析

創建，插入和刪除節點 創建節點

創建一個text節點

var newnode = document.createTextNode("hello word")

查看其內容

#text "hello word"

繼續，創建一個正常的元素

var newnode = document.createElement("script")

將其插入id為myimage的元素后邊

myimage.appendChild(newnode)
插入節點

一旦有了一個新節點可以使用Node方法的appendChild或者insertBefore()將其完成插入。
https://developer.mozilla.org...
https://developer.mozilla.org...
如果調用插入的方法將文檔中的一個節點再次插入，那個節點將會自動從它當前的位置刪除并在新的位置重新插入，沒有必要顯式的刪除節點，因為節點已經自動隱式刪除了。

刪除和替換節點

removeChild()方法重文檔樹中刪除一個節點。該方法不在待刪除的節點上調用，而是在其父節點上調用（和名字暗示那樣的child）然后將其子節點刪除。

n.parentNode.removeChild(n)

將會刪除n節點的子節點的n節點
replaceChild()方法刪除一個子節點并用一個新的節點取而代之，在父節點上調用該方法。用一個文本字符串來替換節點n

n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n);
一個栗子 
// 用一個新的元素替換n節點，并使n成為該元素的子節點
function embolden(n) {
    // 根據參數為字符串而不是節點，將其當做元素的id,進行查詢得到節點,如果傳入的是節點，直接進行下一步
    if (typeof n == "string") n = document.getElementById(n);
    var parent = n.parentNode;    // 獲得n的父節點
    var b = document.createElement("b");    // 創建一個元素
    parent.replaceChild(b, n);    // 進行替換操作
    b.appendChild(n);    // 使得n成為父節點的子節點
};

通過api完成子節點的替換，使用方法，調用一個removeChild以及parentNode完成一次調用

一個虛擬節點 
var p = document.createElement("p");
undefined
p;


container.appendChild(p);


container


a;

a.appendChild(container)


p;


p.textContent = "hello word!"
"hello word!"

好啦，頁面成功更新，使用虛擬節點拼接完成一個比較完成的樹，在將其拼接到body的子節點中，徹底的完成節點操作

DocumentFragment

DocumentFragment 為一種特殊的Node，其作為其他節點的一個臨時容器。
它的特殊之處在于它能使得一組節點被當做一個節點看待。

舉栗子

倒序排列節點n的子節點

// 倒序排列節點n的子節點
function reverse(n) {
    // 創建一個DocumentFragment 座位臨時容器
    var f = document.createDocumentFragment();
    // 從后到前循環子節點，使得每一個子節點移動到臨時容器中
    // n的最后一個節點變成f的第一個節點
    // 每次給f添加一個節點該節點會自動從n中刪除
    while(n.lastChild) f.appendChild(n.lastChild);    // 添加子節點


    // 最后，把f的所有子節點一次性全部移回n中
    n.appendChild(f);
};
insertAdjacentHTML() 將指定的文本解析為HTML或XML，并將結果節點插入到DOM樹中的指定位置。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96662.html

相關文章

  • 前端知識點總結——DOM

    摘要：前端知識點總結什么是什么是專門操作網頁內容的標準為什么統一不同瀏覽器操作網頁內容的標準優點幾乎所有瀏覽器兼容什么是網頁中所有內容在內存中都是保存在一棵樹形結構中網頁中每項內容元素文本屬性注釋，都是樹上的一個節點對象。 前端知識點總結——DOM 1.什么是DOM: Document Object Model 什么是: 專門操作網頁內容的API標準——w3c 為什么: 統一不同瀏覽器操作網...

    Vultr 評論0 收藏0

  • 虛擬 DOM 到底是什么？

    摘要：很多人認為虛擬最大的優勢是算法，減少操作真實的帶來的性能消耗。雖然這一個虛擬帶來的一個優勢，但并不是全部。回到最開始的問題，虛擬到底是什么，說簡單點，就是一個普通的對象，包含了三個屬性。 是什么？ 虛擬 DOM （Virtual DOM ）這個概念相信大家都不陌生，從 React 到 Vue ，虛擬 DOM 為這兩個框架都帶來了跨平臺的能力（React-Native 和 Weex）。因...

    jayce 評論0 收藏0

  • Deep In React 之詳談 React 16 Diff 策略(二)

    摘要：對于同一層級的一組子節點，它們可以通過唯一進行區分。基于以上三個前提策略，分別對以及進行算法優化。鏈表的每一個節點是，而不是在之前的虛擬節點。是當前層的第一個節點。再次提醒，是的一層。 文章首發于個人博客 這是我 Deep In React 系列的第二篇文章，如果還沒有讀過的強烈建議你先讀第一篇：詳談 React Fiber 架構(1)。 前言 我相信在看這篇文章的讀者一般都已經了解...

    NSFish 評論0 收藏0

  • vue源碼閱讀之數據渲染過程

    摘要：圖在中應用三數據渲染過程數據綁定實現邏輯本節正式分析從到數據渲染到頁面的過程，在中定義了一個的構造函數。一、概述 vue已是目前國內前端web端三分天下之一，也是工作中主要技術棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結。本文旨在梳理初始化頁面時data中的數據是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路。總體來說vue模版渲染大致流程如圖1所...

    AlphaGooo 評論0 收藏0

  • Vue源碼解析：虛擬dom比較原理

    摘要：算法子節點比較這部分代碼比較多，先說說原理后面再貼代碼。循環結束的標志就是舊子節點數組或新子節點數組遍歷完，即。第二步尾尾比較。第三步頭尾比較。第四步尾頭比較。節點確認后，真實序列為，未確認序列為第五次是均不相似，直接插入到未確認序列頭部。 通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫： 模版字符串轉AST語法...

    Towers 評論0 收藏0

發表評論

0條評論

kevin

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<