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

資訊專欄INFORMATION COLUMN

Javascript DOM2

e10101 / 1528人閱讀

摘要：內部樣式及外部樣式的獲取及修改內部樣式或外部樣式不能通過屬性獲取樣式瀏覽器非標簽節點，偽元素樣式名只讀屬性標簽節點，偽元素樣式名兼容寫法偽元素偽元素只能應用于塊級元素首個字符樣式首行樣式在元素后面添加新的內容樣式在元素前面添加新的內容樣

1. 內部樣式及外部樣式的獲取及修改 
內部樣式或外部樣式不能通過style屬性獲取樣式
IE瀏覽器：var width = div1.currentStyle.width;
非IE:window.getComputedStyle(標簽節點，偽元素).樣式名   
只讀屬性?。?！
window.getComputedStyle(標簽節點，偽元素)["樣式名"]
var height = window.getComputedStyle(div1, null).height;

// 兼容寫法
if(div1.currentStyle){
    var width = div1.currentStyle.width;
    console.log(width);
}else{
    var height = window.getComputedStyle(div1, null).height;
    console.log(height);
}

偽元素: 偽元素只能應用于塊級元素
:first-letter: 首個字符
樣式: color background border float margin padding
:first-line: 首行
樣式: color background border float margin padding
:after :在元素后面添加新的內容
樣式: content
:before :在元素前面添加新的內容
樣式: content



var p1 = document.getElementById("p1");
var text1 = window.getComputedStyle(p1, "after").content;
console.log(text1);    //"where are you from"
2. 小練習：div的移動 



    
    div
3. 節點常用屬性

注：文檔節點 #document 9 null

4. 父子節點的關系 
var div1 = document.getElementById("div1"); 
// 1、獲取當前節點下的所有子節點
var childNodeArr = div1.childNodes;
// [text, div#div2, text, div#div3, text, div#div4, text]
console.log(childNodeArr);
// 2、獲取當前節點下的第一個子節點
var firstNode = div1.firstChild;
console.log(firstNode);   // "div1    "
console.log(typeof firstNode);  // object

// 文本節點屬性
console.log(firstNode.nodeName);  //#text
console.log(firstNode.nodeType);  //3
console.log(firstNode.nodeValue);  // "div1    "
 
 
 // 3、獲取當前節點下的最后一個子節點
 var lastNode = div1.lastChild;
 
 // 4、獲取當前節點的父節點
 var parentNode = div1.parentNode;
 console.log(parentNode);  // body
 
 // 5、獲取根節點
 var doc = div1.ownerDocument;
 console.log(doc);
 
 // 6、獲取兄弟節點
 var div4 = document.getElementById("div4");
 // 6.1、獲取當前節點的上一同級節點
 var pre1 = div4.previousSibling;

 // 6.2、獲取當前節點的上一個同級元素節點
 var pre2 = div4.previousElementSibling;

 // 6.3、獲取當前節點的下一同級節點
 var ne1 = div4.nextSibling;

 // 6.4、獲取當前節點的下一個同級元素節點
 var ne2 = div4.nextElementSibling;

 // 7、獲取當前節點下所有屬性節點
 var attArr = div4.attributes;
 console.log(attArr);
 console.log(attArr[0].nodeName);   //獲取屬性的名字  id
 console.log(attArr[0].nodeValue);   //獲取屬性的值  div4
 console.log(attArr[0].nodeType);   // 2 屬性節點
 
 // 元素（標簽）可以認為是節點， 節點不一定是元素
5.練習：小球碰撞問題

兩球問題

6. 動態操作節點
方法 說明
createElement(tagName) 創建元素節點
父節點.appendChild(新元素節點) 將元素節點添加到父節點上
insertBefore(新的元素節點，參照物節點) 將元素添加到節點之前
div2.id = "div2" 動態添加屬性
createTextNode (Text) 創建文本節點
cloneNode() 只復制當前節點
cloneNode(true) 復制當前節點及其子節點 默認false
replaceChild(新的節點，舊的節點) 替換節點
removeChild(Element) 刪除元素 
// 1、創建元素節點
var div1 = document.createElement("div");
// 設置innerHTML
div1.innerHTML = "我才來了";

//1.1、將元素節點添加到父節點上
// 父節點.appendChild(新元素節點)
// document.body 獲取body節點
document.body.appendChild(div1);

// 1.2、將元素添加到節點之前
// 將新的標簽節點放到參照物之前
var div2 = document.createElement("div");
div2.innerHTML = "明天注意防曬";
var h = document.getElementById("h2");
document.body.insertBefore(div2, h);

// 2、動態添加屬性
// 例子：添加id屬性
div2.id = "div2";

// 3、創建文本節點
// 一個對象只能放到一個位置上
var text1 = document.createTextNode("還不來");
var d = document.getElementById("div1");
// d.appendChild(text1);
// 添加到父節點上
document.body.appendChild(text1);

// 4、復制節點
// 4.1 cloneNode()
var div3 = document.getElementById("div3");
var divC1 = div3.cloneNode();
console.log(divC1);

// 4.2 cloneNode(true) 復制當前節點及其子節點 默認false
var divC2 = div3.cloneNode(true);
console.log(divC1);

// 5、替換節點
// replaceChild(新的節點，舊的節點)
var h1 = document.getElementById("h1");
var div5 = document.createElement("div");
div5.innerHTML = "看完就走了"
document.body.replaceChild(div5,h1)

// 6、 刪除元素
document.body.removeChild(div5);

Javascript DOM3

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

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

相關文章

  • #javascript# DOM2

    摘要：當元素的某一個行為被觸發，瀏覽器會把當前存放在事件池中的所有方法，依次按照存放的先后順序執行。瀏覽器會把一些常用的事件掛載到元素對象的私有屬性上。 DOM2事件綁定的原理1.DOM2事件綁定使用的addEventListener/attachEvent都是在EventTarget這個內置類的原型上定義的，我們使用的時候，會通過原型鏈找個這個方法，然后執行綁定的事件。2.瀏覽器會給當前元...

    BLUE 評論0 收藏0

  • JavaScript DOM2和DOM3——“DOM的變化”的注意要點

    摘要：和級分為許多模塊，分別描述了的某個非常具體的子集。這些模塊主要有核心視圖事件樣式遍歷和范圍以及。另外還有方法和方法框架的變化框架和內嵌框架分別用和表示，它們在級中都有一個新屬性這個屬性包含一個指針，指向表示框架內容的文檔對象。 DOM2和DOM3級分為許多模塊，分別描述了DOM的某個非常具體的子集。這些模塊主要有核心（Core）、視圖（Views）、事件（Events）、樣式（Styl...

    騫諱護 評論0 收藏0

  • JavaScript 簡介

    摘要：簡介原文鏈接簡稱是一種輕量級，解釋型的編程語言，其函數是一等公民。標準的目標是讓任何一種程序設計語言能操控使用任何一種標記語言編寫出的任何一份文檔。核心規定了如何映射基于的文檔結構，以便簡化對文檔的任意部分的訪問和操作。 JavaScript 簡介 原文鏈接 JavaScript ( 簡稱：JS ) 是一種 輕量級，解釋型 的編程語言，其函數是一等公民。眾所周知，它是用于網頁開發的腳...

    URLOS 評論0 收藏0

  • # Javascript # DOM2兼容處理

    摘要：兼容問題，除了語法上的區別，在處理的機制上也有下列問題順序問題，重復問題，對象問題。沒有進行去重處理。在標準瀏覽器中在低版本中究其根本，都是低版本瀏覽器對于它內置事件池處理機制的不完善導致的。 DOM2兼容問題，除了語法上的區別，在處理的機制上也有下列問題：順序問題，重復問題，this對象問題。 語法問題 [標準]curEle.addEventListener(type, fn, fa...

    fnngj 評論0 收藏0

  • 讀書筆記(05) - 事件 - JavaScript高級程序設計

    摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互，接收用戶操作并做出相應的反饋，而事件在此間則充當橋梁的重要角色。 日常開發中，經常會...

    tinylcy 評論0 收藏0

  • 《JavaScript高級程序設計》學習筆記：JavaScript中的事件流和事件處理程序

    摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器?？梢詣h除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。 事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。 可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流 事件流：從頁面中接收事件的順序。 ...

    Rocko 評論0 收藏0

發表評論

0條評論

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