javascript用什麼來取得dom元素

javascript取得dom元素的方法：1、用getElementById()根據id取得元素；2、用getElementsByName()根據name屬性取得元素；3、用getElementsByTagName()根據標籤名稱取得元素；4、用getElementsByClassName()根據類別名稱取得元素；5、用querySelector()根據指定選擇器傳回第一個元素物件。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

js 由三個部分組成：

• #ECMAScript：js 語法

• DOM：文檔物件模型

• BOM：瀏覽器物件模型

WebApi 是W3C組織制定的標準，在WebApi中我們主要學習DOM和BOM 而且對webapi來說也是js 獨有的部分，它既不屬於js自己獨有的範疇也隸屬於js學習的部分。不過在學習WebApi之前需要 js 的基礎作為 學習 WebApi基礎。

DOM

DOM簡介：文檔物件模型（DOM），是w3c 組指推薦的處理可擴展標記語言（HTML或XML）的標準編程接口，w3c 已經定義了一系列的DOM接口，透過這些DOM介面可以改變網頁的內容、結構和樣式。

• 文檔：一個頁面就是一個文檔，DOM中使用document 表示

• 元素：頁面中所有的標籤都是元素，DOM中使用element表示

• 節點：網頁中所有的內容都可以看成是節點（標籤、屬性、文字、註解等）。 DOM中使用node表示

取得DOM元素

#如何取得元素

• 根據id 獲取，使用getElementById () 方法取得帶有id元素的物件

<div>sj</div>


<script>

// 1、因为页面是从上往下执行的，所以先有标签，后来有script获取
// 2、get 获得 element 元素 by通过 --- 驼峰命名法
// 3、参数 id 是大小写敏感的
// 4、返回的是一个元素
var sj = document.getElementById(&#39;overview&#39;);
console.log(sj)

// dir 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(sj)

</script>

• 根據name屬性取得：使用 getElementsByName() 方法可以傳回指定name屬性的物件集合

document.getElementsByName('name')

• 根據標籤名稱取得：使用getElementsByTagName() 方法可以傳回指定標籤名稱的物件集合。

    
• 花海
    
• 晴天
    
• 七里香
    
• 花海
    
• 晴天

    
• 花海2
    
• 晴天2
    
• 七里香2
    
• 花海2
    
• 晴天2

<script> // 1、返回的是 获取过来元素对象的集合，以伪数组形式存储 var lis = document.getElementsByTagName("li"); console.log(lis); // 获取特定的那个 console.log(lis[2]); // 2、遍历元素对象 for(var i = 0; i < lis.length; i++) { console.log(lis[i]); } // 3、element.getElementByTagName() 可以获取这个元素里面的某些标签 var nav = document.getElementById("nav"); var nav2 = nav.getElementsByTagName(&#39;li&#39;) console.log(nav); </script>

注意：因為得到的是一個物件的集合，所以我們想要操作元素就需要遍歷。得到元素物件是動態的

透過HTML5 新增的方法取得

• #getElementsByClassName('類型') 根據類別名稱取得元素

#

// 1、使用 getElementByClassName 获取 class类名元素 
var box = document.getElementsByClassName("box");  // 可以获取全部的 class名为 box的元素
console.log(box);

• querySelector('選擇器') 根據指定選擇器傳回第一個元素物件

// 2、querySelector 返回指定选择器的第一个元素对象 切记：里面选择器需要添加 .box  #nav
var firstBox = document.querySelector('.box')  // 只能获取第一个class名为 box 的元素
console.log(firstBox);

var nav = document.querySelector('#nav')
console.log(nav);

var li = document.querySelector('li')  // 获取的也是第一个 li 元素
console.log(li);

• querySelectorAll('選擇器') 傳回指定選擇器所有元素物件的集合

// 3、querySelectorAll 返回 全部的 li 元素
var allBox = document.querySelectorAll('li') 
console.log(allBox);

特殊元素取得(body, html)

• 取得body 元素

// 1. 获取 body 元素
var bodyEle = document.body;
console.log(bodyEle)

• #取得html 元素

// 2. 获取 HTML 元素
var htmlEle = document.documentElement;
console.log(htmlEle)

注意：重點需要記住取得普通元素的幾種方法。 body、html這些不常用，僅作了解即可。

【相關推薦：javascript影片教學、程式設計基礎影片】

以上是javascript用什麼來取得dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！