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

資訊專欄INFORMATION COLUMN

屬性 元素的內(nèi)容 創(chuàng)建，插入和刪除節(jié)點 虛擬節(jié)點

kevin / 2968人閱讀

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

屬性

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數(shù)據(jù)即可查到提交的post數(shù)據(jù)

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

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

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

可以在元素上添加屬性，然后能通過js讀取其數(shù)據(jù)
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字符轉換為浮點數(shù)進行存儲
    var ymax = parseFloat(dataset.ymax);    // 同理獲取最大值
    var data = sparkLines[i].textContent.split(" ").map(parseFloat);    // 獲取節(jié)點的內(nèi)容，依照空格進行分割，并將值依次轉換為數(shù)值
    console.log(data);
}

可以看到控制臺已經(jīng)輸出一個數(shù)組了。

作為attr節(jié)點的屬性

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

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

以標簽作為分隔

This is the element content!

beforebegin     afterbegin              beforeend   afterend

獲取內(nèi)容，上方的是插入元素的內(nèi)容

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

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

nodeList[0].innerHTML = "hello word"

將會把頁面內(nèi)容更改為hello word

script元素中的文本

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

作為text節(jié)點的元素內(nèi)容

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

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

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

插入元素內(nèi)容

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

element.insertAdjacentHTML()

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

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

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

Element.insertAdjacentText()

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

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

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

h.insertAdjacentText("afterend", "
")

也不會被dom解析

創(chuàng)建，插入和刪除節(jié)點 創(chuàng)建節(jié)點

創(chuàng)建一個text節(jié)點

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

查看其內(nèi)容

#text "hello word"

繼續(xù)，創(chuàng)建一個正常的元素

var newnode = document.createElement("script")

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

myimage.appendChild(newnode)
插入節(jié)點

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

刪除和替換節(jié)點

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

n.parentNode.removeChild(n)

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

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

通過api完成子節(jié)點的替換，使用方法，調(diào)用一個removeChild以及parentNode完成一次調(diào)用

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


container.appendChild(p);


container


a;

a.appendChild(container)


p;


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

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

DocumentFragment

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

舉栗子

倒序排列節(jié)點n的子節(jié)點

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


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

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

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

相關文章

  • 前端知識點總結——DOM

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

    Vultr 評論0 收藏0

  • 虛擬 DOM 到底是什么？

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

    jayce 評論0 收藏0

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

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

    NSFish 評論0 收藏0

  • vue源碼閱讀之數(shù)據(jù)渲染過程

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

    AlphaGooo 評論0 收藏0

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

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

    Towers 評論0 收藏0

發(fā)表評論

0條評論

kevin

男|高級講師

TA的文章

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