DOM相關方法，屬性整理
1、獲取元素的方法
1根據id獲取對象
document.getElementById('');
2根據標簽名獲取對象
document.getElementsByTagName('')
3根據類名獲取元素對象
document.getElementsByClassName('')
4獲取body元素
document.body
2、節點/元素相關方法
1獲取子節點
var 子節點的偽數組=父親.childNodes
2獲取子元素
var 子元素的偽數組=父親.children;
3獲取屬性節點
var idnode=ul.getAttributeNode('')
4獲取下一個兄弟節點
var node=xxx.nextSibing;
5獲取下一個兄弟元素
var ele = xxx.nextElemenetSibling
6獲取上一個兄弟節點
var node= xxx.previousSibling;
7獲取上一個兄弟元素
var ele = xxx.previousElementSibling
8追加子節點
father.appendChild(demo)
把一個節點放到父親點內部的最后
9插入子節點
father.innertBefore()
10移除
father.removeChild()移除子節點
11克隆
var clone=demo.cloneNode(true);
deep:深度，一般傳入true
12創建子元素
var ele = document.createElement()
13獲取第一個子元素
var frist=xxx.fristElementChild;
var frist=xxx.children[0];
獲取第一個子節點 fristChild
14獲取最后一個子元素
var last=xxx.lastElementChild
var last=xxx.children[xxx.children.length-1];
獲取最后一個子節點 lastChild
15獲取父節點
var parent=xxx.parentNode;

3.元素屬性
1.src屬性 img標簽圖片的路徑
2.innerText屬性 雙標簽的內部文本
3.innerHTML屬性 雙標簽的內部html textContent也是內部文本
4.className屬性 樣式
5.disable input標簽禁用屬性disable 取值true或者false
6.type 不同類型的input的標簽
7.value 標簽的value的值
8.selected 下拉菜單select某一項被選中 取值true或者false
9.checked checkbox的選中狀態 checked 取值true或者false
10.自定義屬性 ******
1. 獲取 任何標簽中的屬性都可以獲取
console.log(box.getAttribute("a"));//可以獲取沒有規定的屬性
console.log(box.getAttribute("id"));//也可以獲取有規定的屬性
2. 設置 任何標簽中的屬性都可以設置
box.setAttribute("b", "2");//可以設置沒有規定的屬性
box.setAttribute("class", "cls");//可以設置有規定的屬性
3. 移除 任何標簽中的屬性都可以移除
box.removeAttribute("a");
box.removeAttribute("class");

11.背景顏色document.body.style.backgroundColor='red'

12.寬高
box.style.box='200px';box.style.height='200px';
13.背景圖片
box.style.backgroundImage='url(images/1.png)';
14.隱藏盒子
this.style.display='none';this.style.visibility='hidden'
15.變盒子的位置
this.style.left='10px';this.style.top='10px;'
16.改變盒子的層級
this.style.zIndex='10'
4.事件
1.點擊事件
ele.οnclick=function(){} 注意在事件中，要獲取當前點擊的元素對象都用this
2.鼠標懸浮，鼠標離開事件
懸浮ele.οnmοuseοver=function(){}
離開ele.οnmοuseοut=function({})
3.焦點事件
鼠標失去焦點 ele.οnblur=function(){}
鼠標獲取焦點 ele.οnfοcus=function(){}
4.鍵盤事件
鍵盤按下 ele.οnkeydοwn=function (){}
鍵盤抬起 ele.οnkeyup=function(){}
5.雙擊事件
ele.ondibclick=function(){}
5.字符串相關方法
1.字符串的替換方法 replace
xxx=xxx.replace(searchValue,replaceValue);
replace特點：只找第一個匹配的替換
2.字符串的搜索方法indexOf()
xxx.indexOf(searchString);
查找searchString在xxx的第一個索引位置
如果查找的到時不存在字符串-1
如果查找的是""0
3.刪除左右空格trim()
txt.value.trim()刪除字符串的左右空格

?

?

window.onload和$(function(){})
window.onload表示頁面加載完了后包括dom和js，再執行函數里面的內容
$(function(){})表示加載完了后再執行函數里面的內容 dom結構加載完畢后
$(document).ready(function(){})

1.$(function(){})不會被覆蓋，而window.onload會被覆蓋，個人感覺$(function(){})不會被覆蓋的原因是將其放入到了一個隊列中，在對應時機一次出隊。
2. $(function(){})在window.onload執行前執行的，$(function(){})類似于原生js中的DOMContentLoaded事件，在DOM加載完畢后，頁面全部內容（如圖片等）完全加載完畢前被執行。而window.onload會在頁面資源全部加載完畢后才會執行。

?

DOM文檔的加載步驟

1.解析html結構

2.加載外部的腳本和樣式文件

3.解析并執行腳本代碼

4.執行$(functhion(){})對應的代碼

5.加載圖片等二進制資源

6.頁面加載完成執行window.onload

?

轉載于:https://www.cnblogs.com/xiaoxie2016/p/7227395.html

總結

以上是生活随笔為你收集整理的DOM相关方法，属性整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。