顯示具有 DOM 標籤的文章。 顯示所有文章
顯示具有 DOM 標籤的文章。 顯示所有文章

2023年7月3日 星期一

V120202B - 了解畫面 DOM的結構 – sub_panel2 -append - $

 目的: V120202B- 了解畫面 DOM的結構 – sub_panel2

一.顯示[畫面元件]對應[DOM] -操作說明:
                    1>console.log("sub_panel2:", sub_panel2);
                    2>由[console]分頁 ,  展開 [sub_panel2] 欄位值, 點 div sub_panel2 , 跳至 [Elements]分頁
                    3>[Elements]分頁點選div[sub_panel2_header], 畫面顯示該 div
                    
二. $().append處理說明:  0> Ext 元件 panel , 實際上在 DOM 的結構分成 2 div(header, body)
                                          1>$("#sub_panel2").append("div  id=my_div_barcode  xxxx") , 
                                              會加在 body 下方看不到











1>*.js
 {
    xtype: 'button', text: '顯示  QrCode ', id: 'sub_QrCode_Btn',
    listeners: {
                click: function () {
                    //genQRcodeDiv("sub_panel2", "5325YET064602&test&123eee");                            
                    var Tmp_barcode_text = "5325YET064602&test&123eee";
                    var Tmp_QrcodeStr= "<div id='my_div_barcode'  style='width: 150px; height: 150px;margin-top: 5pt;margin-left: 30pt; font-size: 6pt;' >"
                        + genQRcodeStr(Tmp_barcode_text, 100, 100, true)
                        + "</div>"                    
                    //$("#print_area").remove();                    
                    //var Tmp_sub_panel2 = $("#sub_panel2");  --> 會看不到 條碼
                    var Tmp_sub_panel2 = $("#sub_panel2-innerCt"); //20230703
                    Tmp_sub_panel2.append(Tmp_QrcodeStr);
                    console.log("0 Tmp_sub_panel2:", Tmp_sub_panel2);
                    var pub_print_area_Str1 = "<div  id='print_area'   style='border: 5px solid green;'>";
                    Tmp_sub_panel2.append(pub_print_area_Str1);
                    console.log("1 Tmp_sub_panel2:", Tmp_sub_panel2);                    
                },
            }
        },









張貼者： 於 沒有留言:
標籤： , ,

2022年8月30日 星期二

DOM -0 DOM解析 - How Browser Work

目的: DOM的解析及取得元件

處理說明:  1> Browser 如何解析 HTML 成 DOM


原始參考網址 : https://ithelp.ithome.com.tw/articles/10191765

透過 DOM API 查找節點







當一個網頁被載入到瀏覽器時，瀏覽器會先分析這個 HTML 檔案，然後會依照這份 HTML 的內容解析成「DOM」 (Document Object Model，文件物件模型)。

DOM 是 W3C 制定的一個規範，它是獨立於平台與語言的標準。 換言之，只要遵守這樣的規範實作，不管是什麼平台或者是什麼語言開發，都可以透過 DOM 提供的 API 來操作 DOM 的內容、結構與樣式。

所以說，DOM 是網頁的根本，懂得 控制籃板球的人就能控制整場比賽 控制 DOM 就可以控制整個網頁，做出良好的互動體驗。

那麼在今天的分享中，我們就繼續來介紹 DOM API 查找節點的方法吧。

1><script> </script>放在 </body>之前 , HELLO 正常顯示

-->
當我們把 <script> 標籤放在 </body> 結束之前，
由於 DOM 已經解析完成，所以 document.querySelector 就可以順利取得 id="hello" 的節點，並且把 'HELLO' 的字串放在網頁裡囉！



2><script> </script>放在 </head>之前 , HELLO 無法正常顯示

-->

當瀏覽器在 <head> ... </head> 之間遇到 <script> 標籤時，就會暫停解析網頁，並且「立即」執行 <script> 裡的內容，直到 script 執行完畢後再繼續解析網頁。發在 <head> ... </head> 裡的 <script> 想要嘗試去尋找 <div id="hello"> 這個標籤，但因為還沒解析到網頁本體，所以也無從取得。


document 物件是 「DOM tree」 的根節點，所以當我們要存取 HTML 時，都從 document 物件開始。 而 DOM 的節點類型除了 「HTML 元素節點」 (element nodes) 外，還有「文字節點」 (text nodes)、「註解節點」 (comment nodes) 等。

// 針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。
document.querySelector('xxx'); 
document.querySelectorAll('xxx');

document.querySelector 與 document.querySelectorAll 可以用 「CSS 選擇器」 (CSS Selectors) 來取得「第一個」或「所有」符合條件的元素集合 (NodeList)。



document.getElementById 以及 document.querySelector 
-->因爲取得的一定只有一個元素/節點，所以不會有 index 與 length 屬性。

而 document.getElementsBy** (注意，有個 s) 以及 document.querySelectorAll 
-->分別回傳 「HTMLCollection」 與 「NodeList」
「HTMLCollection」只收集 HTML element 節點
「NodeList」除了 HTML element 節點，也包含文字節點、屬性節點等



張貼者： 於 沒有留言:
標籤： ,

DOM -1 Event 的處理機制 - bubble -catch -eventflow

目的: 了解 Web  DOM的 event 處理 機制

處理說明:   1> catch 時, 由上而下 (Document --> html --> body --> table --> tr --> td --> div)

                    2> bubble時, 由下而上(div-->td--> tr--> table --> body --> html --> Document)

-->  DOM 兩種機制 (catch/bubble) 均有, 可分別設定 catch / bubble 的 event handler

參考原始網址: https://ithelp.ithome.com.tw/articles/10191970

- 重新認識 JavaScript: Day 14 事件機制的原理



而事件流程 (Event Flow) 指的就是「網頁元素接收事件的順序」。

事件流程可以分成兩種機制：

  • 事件冒泡 (Event Bubbling)
  • 事件捕獲 (Event Capturing)

假設現在的事件是點擊上圖中藍色的 <td>。

那麼當 td 的 click 事件發生時，會先走紅色的 「capture phase」：

  1. Document
  2. <html>
  3. <body>
  4. <table>
  5. <tbody>
  6. <tr>
  7. <td> (實際被點擊的元素)

由上而下依序觸發它們的 click 事件。

然後再繼續執行綠色的 「bubble phase」，反方向由 <td> 一路往上傳至 Document，整個事件流程到此結束。

Ex:  DOM的實作案例

<div>
    <div id="parent">父元素      
          <div id="child">子元素</div>
     </div>
</div>


// 父元素
var parent = document.getElementById('parent');
// 子元素
var child = document.getElementById('child');

// 透過 addEventListener 指定事件的綁定
// 第三個參數 true / false 分別代表捕獲/ 冒泡 機制

parent.addEventListener('click', function () {
  console.log('Parent Capturing');
}, true);  //capture 機制 event hadler

parent.addEventListener('click', function () {
  console.log('Parent Bubbling');
}, false); //bubble 機制 event hadler


child.addEventListener('click', function () {
  console.log('Child Capturing');
}, true);

child.addEventListener('click', function () {
  console.log('Child Bubbling');
}, false);

-->

當我點擊的是「子元素」的時候，透過 console.log 可以觀察到事件觸發的順序為：
       "Parent Capturing"
       "Child Capturing"
       "Child Bubbling"
       "Parent Bubbling"

由此可知，點擊子元素的時候，父層的 Capturing 會先被觸發，然後再到子層內部的 Capturing 或 Bubbling 事件。 最後才又回到父層的 Bubbling 結束。

子層的 Capturing 或 Bubbling 誰先誰後呢？
要看你程式碼的順序而定。

子層若是 Capturing 在 Bubbling 前面：

child.addEventListener('click', function () { console.log('Child Capturing'); }, true); child.addEventListener('click', function () { console.log('Child Bubbling'); }, false);

--> 子層觸發順序
"Child Capturing" "Child Bubbling"

-->
addEventListener() 基本上有三個參數，分別是「事件名稱」、「事件的處理器」(事件觸發時執行的 function)，以及一個「Boolean」值，由這個 Boolean 決定事件是以「捕獲」或「冒泡」機制執行，若不指定則預設為「冒泡」。
true/false : catch/bubble


Bubble 及 Catch event flow





張貼者： 於 沒有留言:
標籤： , , , ,
訂閱： 文章 (Atom)