2. 程式人生 > >js中dom基礎及操作dom

js中dom基礎及操作dom

阿新 • • 發佈：2018-10-26
span htm 們的 cti class rem itl ech http

dom基礎認識

　　1.dom節點

　　1）children,獲取的是所有的孩子節點，獲取的是數組

　　2）parentNode,獲取的是父節點，獲取的是對象

　　2.dom操作方法

　　1）appendChild(),把節點添加到父節點後面，添加的節點是排在最後

　　2）insertBefore()，把節點添加到父節點的哪個位置之前

　　3）removeChild(),刪除節點

下面一一通過代碼來講解，更加容易理解它們的含義

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:
 
0;
            padding:0;
        }
        #tab{
            margin-left:-3px;
            float:left;
            width:60px;
            //height:20px;
            background:#ccc;
            text-align:center;
        }
        #tab #div-tab{
            
            
            border:1px solid #999;
        }
        #tab ul{
            
            overflow:hidden;
            background:blue;
            
        }
        #tab ul li{
            list
 
-style:none;
        }
    
    </style>
    <script>
        window.onload=function(){
            var oTab=document.getElementById(‘tab‘)   //獲取對象
            var oUl=document.getElementsByTagName(‘ul‘)[0];//獲取ul標簽對象
            var oLl=document.getElementsByTagName(‘li‘)[0];//獲取第一個li對象
            alert(oUl.children.length)  //
 
獲取到ul下孩子節點li，彈出數組的長度為4
            alert(typeof oLl.parentNode) //獲取到li父節點ul，彈出的是object，對象
            oLi=document.createElement(‘li‘) //創建li節點
            var node=document.createTextNode("5");//創建節點內容
            oLi.appendChild(node)    //把內容添加到li節點
            oUl.appendChild(oLi)    //再把創建的li節點，添加到ul下，默認排在最後
            oDiv=document.createElement(‘div‘) //創建div節點
            var node1=document.createTextNode("tab2"); //創建節點內容
            oDiv.appendChild(node1)   //把內容添加到新建的div節點
            oTab.insertBefore(oDiv,oUl) //把創建的div添加到tab下，位置在ul之前
            //oTab.removeChild(oDiv)        //刪除新建的div節點
        }
        
    </script>
<body>
    <div id="tab">
        <div id="div-tab">tab1</div>
        <ul >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

效果圖

技術分享圖片

js中dom基礎及操作dom

相關推薦

js中dom基礎及操作dom

span htm 們的 cti class rem itl ech http dom基礎認識 　　1.dom節點 　　1）children,獲取的是所有的孩子節點，獲取的是數組 　　2）parentNode,獲取的是父節點，獲取的是對象 　　2.dom操作方法 　　1）ap

單頁應用中更優雅的操作dom

前言 以前的專案是jquery獨行天下，但是隨著單頁應用的流行，很多公司放棄了jquery的使用，主要因為專案中dom操作較少，一般都是資料改變dom，但是假如專案中難免的操作一些dom的時候，我們可以完全用js的一些寫法，完全沒有必要小小的操作來引進一個那麼龐大的jque

JS中Date物件的操作-及js庫內部內建物件 Js獲取當前日期時間及其它操作

Js獲取當前日期時間及其它操作 轉載於carekee部落格 原地址：http://www.cnblogs.com/carekee/articles/1678041.html         var myDate = n

【線上程式碼】js中使用freemarker標籤操作list及list巢狀

背景說明：頁面中使用freemarker作為模板，現需要將後端返回的資料通過js的方式儲存資料。記錄之！ 後臺返回資料 注：圖中為後臺返回有用資料，主要是紅框中的資料在前端要用到。 前端js操作

DOM基礎——節點操作（二）

firstChild : 第一個子節點  （標準瀏覽器下會把標籤的換行作為空白文字節點） firstElementChild: 標準下第一個子節點 （ie6/7/8不支援） lastChild / lastElementChild : 最後一個子節點 （相容同上） previousSibling

js中對數組的操作-------Day49

substr 沒有 技術分享 表示 實用 麻煩 向上 新的 既然 今天碰到了一個問題：easyui的使用中，datagrid表格的高度怎樣改變（設定成一個固定的高度），看了半天文檔，也從網上查了些。還楞是沒弄出來，有點小郁悶。這easyui在某些情況情況下確實好用了，可

js中的數組操作

subst itl content brush 位置 parseint 兩個 string 數組 <!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type

如何理解和熟練運用js中的call及apply？

tex app 前端開發 對象 方便 有一個 ons arguments 定義 在前端開發過程中，我們經常需要改變this指向，通常我們想到的就是用call方法，但是對於call的理解很多人不是很清晰，那麽下面小提莫就給大家詳細說一說call和apply的詳細知識。 cal

list+tuple的基礎及操作

value eve 範圍 init type 調用 錯誤 字符串 沒有 列表（list）基礎及基礎操作+tuple的小範圍知識list一個排列有序的線性結構隊列，由若幹個元素組成（元素可以是任意對象）列表是可變類型list（） ：new empty（空） listlist

jq中連續刪除的操作；以及js中連續刪除的操作；jq方法中如何寫循環。

http 取值 利用 span 方法 以及 循環 刪除 for循環 jq中連續刪除的操作 采用的是用父節點的來進行刪除，不能直接利用$(XXX)來回去父節點來進行刪除。存在邏輯上的錯誤。 js中的連續刪除 和jq中刪除是一個道理，同樣實在利用父節點去刪除子節點。獲

【前端】javascript中的陣列及操作方法

建立： 物件的例項建立：var aList = new Array(1,2,3); 直接建立：var aList = [1,2,3,'a'] 陣列的api：增刪改查/反轉排序/合成字串 1.增：放到最後 var list = ['穿山甲','水娃','蛇精'] list.push

Cisco Packet Tracer中的基礎命令操作以及組織網路實驗

基於思科模擬器的路由基礎命令操作 1.開啟Cisco packet tracer，選取路由器Router2811（example） 2.雙擊該路由器，在彈出的視窗選擇 CLI 選項，啟動後輸入no,回車即可進入路由器的使用者模式,若要進行對話方塊配

C#讀取SharePoint的List中的資料及操作SharePoint

一般SharePoint都有提供一個webservice來訪問、操作SharePoint的各項資料。 地址一般為http://server/_vti_bin/Lists.asmx 下面是一個簡單的讀取SharePoint List資料的例子：       &

js中css樣式的操作

HTML中定義樣式的方式有三種：通過<link/>元素包含外部樣式表文件、使用<style/>元素定義嵌入式樣式，以及使用style特性定義針對特定元素的樣式。“DOM2級樣式"模組圍繞這3種應用樣式提供了一套API。要確定瀏覽器是否支援DOM2級定

在MVC中Dashboard基礎入門操作

DevExpress中的Dashboard這個圖形外掛真的很好用, 只需要在設計器繫結資料就行了,完全不用寫後臺程式碼.我也是剛學這個外掛,可能還有一些我沒有了解的知識點,忘各位大佬不吝賜教.我寫這篇博文也是為了給想我一樣剛研究這個外掛的博友們一些我的總結,給各位節省一些時間,哈哈. 1. 當我們建立好一個D

Js中身份證驗證及社會統一信用程式碼驗證

二代身份證驗證規則如下： //函式引數必須是字串，因為二代身份證號碼是十八位，而在javascript中，十八位的數值會超出計算範圍，造成不精確的結果，導致最後兩位和計算的值不一致，從而該函數出現錯誤

js 中常見的 字串操作

1、indexOf(): 從左往右搜尋 indexOf() 方法對大小寫敏感！大小寫是有區別的 如果要檢索的字串值沒有出現，則該方法返回 -1。 var a = "hello,word"; // indexOf() 檢測有某個字元 則返回這個字元的位置，沒有檢測出這個字元

js中數組的操作方法

構造函數 方法 刪除數組元素 shift nsh 接受 ons 更新 strong 今天給大家帶來一篇有關數組操作方法的文章。 新建數組 方法一：通過new運算符創建一個數組構造函數。 var arr = new Array(); 方法二：通過方括號直接創建直接量

VRP基礎及操作

VRP基礎及操作 前言 通用路由平臺VRP（Versatile Routing Platform）是華為公司資料通訊產品的通用作業系統平臺，它以IP業務為核心，採用元件化的體系結構，在實現豐富功能特性的同時，提供基於應用的可裁剪和可擴充套件的功能。 實驗拓撲 實驗要求 1. 路由器AR1

闡述JS中原型鏈及prototype和__proto__的區別

在開始先給出我在知乎上看到的一張圖，可以幫助理解： 如果現在你還不能很好的理解這副圖的意思，那請繼續往下看。 一、prototype和 _proto_ 的概念 prototype是函式的一個屬性（每個函式都有一個prototype屬性），這個屬性是一