html基礎：DOM操作
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操作