2. 程式人生 > >DOM節點例子

DOM節點例子

阿新 • • 發佈：2017-09-14
line win nts setattr set style node 基礎 doc

elementNode.setAttribute(name,value)

1.name: 要設置的屬性名。

2.value: 要設置的屬性值。

elementNode.getAttribute(name)

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

2. name：要想查詢的元素節點的屬性名字

元素節點：構成了DOM的基礎。文檔結構中，<html>是根元素，代表整個文檔，其他的還有<head>,<body>,<p>,<span>等等。元素節點之間可以相互包含(當然遵循一定的規則)


文本節點：包含在元素節點中。
屬性節點：元素都可以包含一些屬性，屬性的作用是對元素做出更具體的描述，比如id,name之類的。

nodeName 屬性
nodeName 屬性規定節點的名稱。
nodeName 是只讀的
元素節點的 nodeName 與標簽名相同
屬性節點的 nodeName 與屬性名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
註釋：nodeName 始終包含 HTML 元素的大寫字母標簽名。
nodeValue 屬性
nodeValue 屬性規定節點的值。
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本本身
屬性節點的 nodeValue 是屬性值

nodeType 屬性
nodeType 屬性返回節點的類型。nodeType 是只讀的。
比較重要的節點類型有：
元素類型 NodeType
元素 1
屬性 2
文本 3
註釋 8
文檔 9

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body><div>  
            <span id="span">各類
 
節點</span>  
        </div>  
        <script type="text/javascript">
            window.onload = function() {
                var element = document.getElementById("span");
                var text = element.firstChild;
                var property = document.getElementById("span").getAttributeNode("id");
                //nodeName
                alert("這是元素節點的返回值：" + element.nodeName); //返回的標簽名SPAN,註意是大寫的
                alert("這是文本節點的返回值：" + text.nodeName); //返回的#text  
                alert("這是屬性節點的返回值：" + property.nodeName); //返回的是屬性名，這裏是id
                //nodeValue
                alert("這是元素節點的返回值："+ element.nodeValue);//本身就沒有意義，返回的是null  
                alert("這是文本節點的返回值："+ text.nodeValue);//返回的是文本值  各類節點  
                alert("這是屬性節點的返回值："+ property.nodeValue);//返回的是屬性值，這裏是id的屬性值 span  
                //nodeType
                alert("這是元素節點的返回值："+ element.nodeType);//元素節點返回1  
                alert("這是文本節點的返回值："+ text.nodeType);//文本節點返回3  
                alert("這是屬性節點的返回值："+ property.nodeType);//屬性節點返回2  
            }
            
        </script>
    </body>

</html>

DOM節點例子

相關推薦

DOM節點例子

line win nts setattr set style node 基礎 doc elementNode.setAttribute(name,value) 1.name: 要設置的屬性名。 2.value: 要設置的屬性值。 elementNode.getAttribu

JavaScript中的獲取DOM節點

true rip strong asc on() var ive ins .cn 主要有：document.getElementById，getElementsByClassName，getElementsByTagName，getElementsByName 函數名寫

DOM節點關系

domDOM可以將任何HTML描繪成一個由多層節點構成的結構。節點分為12種不同類型，每種類型分別表示文檔中不同的信息及標記。每個節點都擁有各自的特點、數據和方法，也與其他節點存在某種關系。節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。本文將詳細描述DOM間的節點關系　　節

jQuery DOM節點操作

使用 strong cti html ndt pty index all taf 一、創建節點 var box = $(‘<div id =box>節點</div>‘); //創建一個節點 $(‘body‘).appended(box);　　　　　

javaScript DOM節點樹

next hid body nbsp 屬性 學生 節點 dom節點 元素 1. 例如： <html> <head> <title>節點樹<title/> <head/> <body> <p>

給echart初始化的dom節點綁定時間獲取點擊的值渲染省市區

北京 ssa sta .sh 數據 dom節點 art har message this.drawMap().on(‘click‘, function (params) { var province = params.name;

HTML DOM節點的增刪改查

自己 div text dom節點 定義 pos 就會 fcm .get 上篇博客中，我們已經初步接觸了DOM基礎，可是我們學習是為了可以更好地應用，今天我們就來看看DOM節點的增刪改查。 無論在哪裏，我們想要操作一個東西，總是應該先去獲得它。那麽

react入門-----（jsx語法，在react中獲取真實的dom節點）

rip opp blog alice code text fault 通過 cnblogs 1、jsx語法 1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2 <!-- HTML 語言直接寫在 JavaS

vue怎麽不通過dom操作獲取dom節點

urn mil tar code class func pla ret 消失 今天寫一個公眾號的項目，寫了一個vue的搜索組件，點擊搜索框時，背景出現一個遮罩，代碼結構如下： template:`<div class="searchBar-div">

DOM節點操作

png 而不是 com func baidu 執行 classname class 技術分享 1、修改 class 屬性要寫成className：因為clas是關鍵字 2、.innerHTML修改標簽中的文字 給頁面添加節點document.createElemen

JQuery---選擇器、DOM節點操作練習

span gif .text ide none tle pre splay body 一、練習一 1、需求效果分析： 2、代碼示例： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/

將字符串順序重新排序DOM節點

html rip www 字符 pro push wiki ldr style 對於一個已有的HTML結構： Haskell JavaScript Python Ruby Scheme <!-- HTML結構 --> <ol id

JavaScript 操作DOM 節點

cnblogs -1 操作dom -- append com 技術分享 節點 doctype 1、添加DOM節點 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

jQuery DOM節點操作方法大全

dom jquery 元素操作 append(content | fn)：向每個匹配的元素內部追加內容。參考：http://jquery.cuishifeng.cn/append.html例如：向所有段落中追加一些HTML標記。<p>I would like to say: </

設置dom節點屬性的代碼優化

stop 相對 方案 關註 cnblogs 很多 top switch 優化 需求：某dom節點在正常情況下，有設置其transition-duration為1s，在mousemove時候，要去掉其transition-duration設置的時間，在mouseup時候，恢復

javascript dom節點x

文本 prev 下一個 alt 返回 技術 復制代碼 bili 順序 一,js 獲取元素(父節點,子節點,兄弟節點) var test = document.getElementById("test");　　var parent = test.parentNod

javascript dom節點的

技術分享 next() ctr test 匹配 新的 就是 div ava 一,js 獲取元素(父節點,子節點,兄弟節點) 按 Ctrl+C 復制代碼 按 Ctrl+C 復制代碼 二,jquery 獲取元素(父節點,子節點,兄弟節點)

javascript學習筆記：DOM節點概述

理解 obj title truct sin 文本 utf-8 html 解析 0x01： DOM是javascript操作網頁的接口，全稱為文檔對象模型(Document Object Model)。它的作用是將網頁轉為一個javascript對象，從而可以使用javas

javascript學習筆記：DOM節點關系和操作

seq 文本節點 文檔 use true 添加節點 check iss pen 0x01：前面的話 DOM可以將任何HTML描繪成一個由多層節點構成的結構。節點分為12種不同類型，每種類型分別表示文檔中不同的信息及標記。每個節點都擁有各自的特點、數據和方法，也與其他節點存在

js的DOM節點操作：創建 ，插入，刪除，復制，查找節點

con 函數 nts html屬性 追加 clas tracking nodes 末尾 DOM含義：DOM是文檔對象模型(Document Object Model，是基於瀏覽器編程的一套API接口，是W3C出臺的推薦標準。其賦予了JS操作節點的能力。當網頁被加載時，瀏