當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript教程之DOM和BOM

發(fā)布時間：2025/3/20 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript教程之DOM和BOM 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一：DOM操作

##1、介紹 ##
dom: document object model 文檔對象模型
DOM可以讓我們通過javascript語言對html文檔進(jìn)行增、刪、改、查操作。

為了方便javascript語言通過dom操作html文檔比較方便，把html文檔的各個組成內(nèi)容劃分為各種節(jié)點(diǎn)(對象)：
文檔節(jié)點(diǎn)(document)，其是html根節(jié)點(diǎn)的父節(jié)點(diǎn)
元素節(jié)點(diǎn)
文本節(jié)點(diǎn)
屬性節(jié)點(diǎn)
注釋節(jié)點(diǎn)

以下的代碼都以這個為例子程序：

<html><head><title>這是一個title</title></head><body><h1>例子程序</h1><input id="username" name="username" type="text" value="sihai"/><input id="password" name="password" type="text" value="123"/></body></html>

2、元素節(jié)點(diǎn)的獲取

具體操作方法：

① document.getElementById(id屬性值);每次只返回一個具體元素節(jié)點(diǎn)對象 ② document.getElementsByTagName(tag標(biāo)簽名稱);每次返回一個“集合列表”對象，可以通過下標(biāo)方式變?yōu)榫唧w元素對象：列表[下標(biāo)] 或列表.item(下標(biāo)) ③ document.getElementsByName(name屬性值);不推薦使用，有瀏覽器兼容問題,有的瀏覽器針對form表單域才可以使用該方法。通常應(yīng)用在form表單里邊，返回的信息同 var username = document.getElementById("username"); console.log(username);var in = document.getElementsByTagName("input"); console.log(in[0]); console.log(in.item[0]);

3、文本節(jié)點(diǎn)獲取

<div>hello JavaScript</div>

需要借助div元素節(jié)點(diǎn)再獲得其內(nèi)部的文本節(jié)點(diǎn):
div元素節(jié)點(diǎn)對象.firstChild; //或調(diào)用lastChild，獲得節(jié)點(diǎn)內(nèi)部的第一個子節(jié)點(diǎn)
文本節(jié)點(diǎn).nodeValue; //獲得文本節(jié)點(diǎn)對應(yīng)的文本信息

var h = document.getElementByTagName("h1"); console.log(h[0].firstChild);//<TextNode textContent="例子程序"/> console.log(h[0].lastChild.nodeValue);//例子程序

4、子節(jié)點(diǎn)/兄弟節(jié)點(diǎn)

firstChild、lastChild:父節(jié)點(diǎn)獲得第一個/最后一個子節(jié)點(diǎn) nextSibling:獲得下一個兄弟節(jié)點(diǎn) previousSibling:獲得上一個兄弟節(jié)點(diǎn) childNodes:父節(jié)點(diǎn)獲得內(nèi)部全部的子節(jié)點(diǎn)信息 length: 獲得“集合列表”的長度**注意：**以上屬性在主流瀏覽器(火狐firefox、chrome、safari、opera、IE9以上)中會給考慮空白節(jié)點(diǎn)(回車、空格)。在IE(6/7/8)瀏覽器中不考慮空白節(jié)點(diǎn)。空白節(jié)點(diǎn)本質(zhì)：其是文本節(jié)點(diǎn) <ul><li>上海</li><li>廣州</li> </ul> var u = document.getElementByTagName("ul"); console.log(u[0].childNodes.length);//5 console.log(u.firstChild); console.log(u.firstChild.nextSibling);

5、父節(jié)點(diǎn)

節(jié)點(diǎn).parentNode;

6、屬性操作

6.1、屬性值操作：

① 獲取屬性值元素節(jié)點(diǎn)node.屬性名稱; //只能操作w3c規(guī)定的屬性元素節(jié)點(diǎn)node.getAttribute(屬性名稱); //規(guī)定的和自定義的屬性都可以獲取 ② 設(shè)置(修改)屬性值元素節(jié)點(diǎn)node.屬性名稱 = 值; //只能操作w3c規(guī)定的屬性元素節(jié)點(diǎn)node.setAttribute(名稱，值); //規(guī)定的和自定義的屬性都可以設(shè)置

6.2、屬性節(jié)點(diǎn)獲取：

var attrlist = 元素節(jié)點(diǎn)對象.attributes; //以“數(shù)組列表”形式返回對應(yīng)節(jié)點(diǎn)內(nèi)部的全部屬性節(jié)點(diǎn)信息 attrlist.屬性名稱; //獲得具體屬性節(jié)點(diǎn)獲得節(jié)點(diǎn)類型nodeType：節(jié)點(diǎn).nodeType: 1------> 元素節(jié)點(diǎn) 2------> 屬性節(jié)點(diǎn) 3------> 文本節(jié)點(diǎn) 9------> 文檔節(jié)點(diǎn) var in = document.getElementByTagName("input")[0]; console.log(in.attributes);//[type="text" , name="username",value="sihai"] console.log(in.attributes.type);//type="text" console.log(in.attrubutes.name.nodeType);//2 屬性節(jié)點(diǎn)

7、節(jié)點(diǎn)創(chuàng)建和追加

節(jié)點(diǎn)創(chuàng)建元素節(jié)點(diǎn)：document.createElement(tag標(biāo)簽名稱); 文本節(jié)點(diǎn)：document.createTextNode(文本內(nèi)容); 屬性設(shè)置：node.setAttribute(名稱，值); 節(jié)點(diǎn)追加：父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn));父節(jié)點(diǎn).insertBefore(newnode,oldnode); //newnode放到oldnode的前邊父節(jié)點(diǎn).replaceChild(newnode,oldnode); //newnode替換到oldnode節(jié)點(diǎn)

8、節(jié)點(diǎn)復(fù)制

被復(fù)制節(jié)點(diǎn).cloneNode(true/false); true:深層復(fù)制(本身節(jié)點(diǎn) 和其內(nèi)部節(jié)點(diǎn)) false:淺層復(fù)制 (本身節(jié)點(diǎn))

9、節(jié)點(diǎn)刪除

父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn)); 子節(jié)點(diǎn).parentNode.removeChild(子節(jié)點(diǎn));

10、dom對css樣式的操作

<div style=”width:300px;height:200px; background-color:pink;”></div> ① 獲取css樣式元素節(jié)點(diǎn).style.css樣式名稱;divnode.style.width; //獲取寬度樣式 ② 設(shè)置css樣式(有則修改、沒有則添加)元素節(jié)點(diǎn).style.css樣式名稱 = 值;divnode.style.width =‘500px’;設(shè)置div寬度樣式注意： ① dom操作css樣式只能操作“行內(nèi)樣式”(css樣式分為行內(nèi)、內(nèi)部、外部) ② 操作復(fù)合樣式例如background-color/border-left-color，font-size 需要變?yōu)閎ackgroundColor、borderLeftColor，fontSize中恒線去掉，后邊首字母大寫。(原因：javascript的變量命名規(guī)則不允許有“-”中橫線) ③ 修改樣式，有則修改、無則新增,修改后的樣式變?yōu)樾袃?nèi)樣式

二、BOM

DOM：document object model(文檔對象模型) BOM:browser object model(瀏覽器對象模型) 通過BOM技術(shù)可以模擬瀏覽器對頁面進(jìn)行各種操作：創(chuàng)建子級標(biāo)簽頁面、操作歷史記錄頁面、操作地址欄等等

總結(jié)

以上是生活随笔為你收集整理的JavaScript教程之DOM和BOM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript教程之快速入门
下一篇： JavaScript教程之事件处理