1. 程式人生 > >html基礎:DOM操作

html基礎:DOM操作

str 分享圖片 下一個 字母 box round ID none console

DOM(Document Object Model 文檔對象模型)

一個web頁面被封裝成一個dom對象,通過dom中的js對頁面的標簽進行操作

一、獲取對象

瀏覽器頁面上右鍵--檢查--console,在console控制臺可以直接通過dom,輸入命令

// 直接獲取標簽
 
document.getElementById(i1); //獲取id為i1的標簽
 
document.getElementsByTagName(div); //根據標簽名稱獲得標簽數組
 
document.getElementsByClassName(c1); //根據class屬性獲取標簽的數組
 
document.getElementsByName(
dsx); //根據name屬性獲取標簽數組 // 間接獲取標簽 var tmp=document.getElementById(h-test); tmp.parentElement; // 父節點標簽元素 tmp.children; //所有子標簽 tmp.firstElementChild; //第一個子標簽元素 tmp.lastElementChild; // 最後一個子標簽元素 tmp.nextElementSibling; //下一個兄弟標簽元素 tmp.previousElementSibling; //上一個兄弟標簽元素

二、文本內容

innerText和innerHTML

innerHTML與innerText
 
tmp.innerText; // 獲取標簽中的文本內容
 
tmp.innerText=更改標簽的文本內容; //更改標簽內文本內容
 
tmp.innerHTML; // 獲取標簽中的所有內容,包含html代碼
 
tmp.innerHTML = <a href="http://www.imdsx.cn">更改標簽的html代碼</a> // innerHTML 可以將含有HTML代碼的字符串變為標簽
 

有一段html代碼是這樣的:

技術分享圖片

首先獲取到div對象:var div=document.getElementById(‘inner1‘)

innerText獲取到div標簽內的文本內容:div.innerText,結果就只有div標簽內的文本技術分享圖片

innerHTMlL獲取div標簽內的所有html代碼:div.innerHTML,結果就是div內的html代碼:技術分享圖片

同時也可以通過innerText和innerHTML來更改文本和html:

div.innerText=‘更改div標簽的文本‘

div.innerHTML=‘<a href="www.baidu.com"></a>‘

輸入這些命令後,再次查看div.innerText和div.innerHTML,就可以看到結果已經變為更改後的

input和textarea

tmp.value; //獲取input、textarea參數
 
tmp.value = 內容 // 對input、textarea的內容進行賦值

技術分享圖片

select標簽

select標簽
 
tmp.value; //獲取select標簽的value參數
 
tmp.value = 選項 // 修改select選項
 
tmp.selectedIndex; // 獲取select標簽的選項下標
 
tmp.selectedIndex = 1 // 通過下標更改select的選項

html代碼如下

技術分享圖片

var tmp=document.getElementById(‘s1‘)//獲取對象

技術分享圖片獲取value

技術分享圖片修改value

技術分享圖片

三、操作樣式

tmp.className = c1; // 更改標簽class屬性 只能有一個class屬性
 
tmp.classList;// 獲取樣式數組
 
tmp.classList.add(aaa); //添加樣式 數組
 
tmp.classList.remove(aaa); //刪除樣式
 
tmp.checked; //獲取checkbox的狀態 true為勾選
 
操作單獨樣式
 
style.xxx //操作樣式的粒度更加細化,操作單個樣式屬性,相當於在標簽中增加一個style屬性
 
style.backgroundColor // 例:在css中樣式可以通過【-】進行連接,在JavaScript中,所有的【-】都被去掉,【-】後面的第一個字符大寫
操作屬性

註:css中的樣式帶有-的,在js中需要把-去掉,同時將-後面的首字母大寫,比如background-color 在js中就是backgroundColor

四、操作屬性

setAttribute(key,value) //設置屬性,在標簽中添加屬性或自定義屬性
 
removeAttribute(key) //刪除屬性,在標簽中刪除指定屬性
 
attributes //獲取標簽的所有屬性

我們在做selemium的時候,都需要定位到標簽。但是對於display:none的,就獲取不到,此時就需要先把該屬性去掉,然後才能操作

五、創建標簽

createElement(tagName) //通過DOM創建一個標簽對象
 
appendChild(tagObj) //在父級標簽內添加一個子標簽對象
 
 
字符串方式創建標簽
 
insertAdjacentHTML(where, tagStr) //父級標簽內或外添加一個子、兄標簽
 
beforeBegin //插入到獲取到標簽的前面
 
afterBegin //插入到獲取到標簽的子標簽的前面
 
beforeEnd //插入到獲取到標簽的子標簽的後面
 
afterEnd //插入到獲取到標簽的後面

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

六、字符串操作

1、字符串拼接:

技術分享圖片

2、根據角標獲取字符串中的某個字符

技術分享圖片

3、獲取字符串長度

技術分享圖片

4、字符串中字符的角標

技術分享圖片

5、字符串的大小寫轉換

技術分享圖片

6、獲取子字符串

顧頭不顧尾:

技術分享圖片

7、

七、頁面彈框和url

console.log(msg) //打印數據
 
alert() //彈框提示
 
confirm() //確認彈框,點擊確認返回true ,點擊取消返回false
 
 
location.href //獲取當前的url
 
location.href = http://www.imdsx.cn //重定向
 
location.reload() //刷新
 
location.href = location.href //刷新

html基礎:DOM操作