JavaScript基礎語法-DOM，前端小白必知必會-有解無憂

DOM重點核心

文章目錄

- 獲取元素
- JavaScript事件
- - - 1.執行事件的步驟
    - 2.常見的滑鼠事件
    - 3.常見的鍵盤事件
    - 4.常見的表單事件
    - 5.常見的編輯事件
    - 6.框架/物件事件
- 操作元素
- - - 修改元素內容
    - 修改樣式屬性
    - - 使用style修改樣式屬性
      - 使用className修改樣式屬性
    - 獲取、設定、移除屬性值
- 排他思想
- 節點操作
- - - 父節點parentNode
    - 子節點childNodes
    - 子節點children(常用)
    - 首尾子節點
    - 兄弟節點
    - 創建、添加節點
    - 洗掉節點
    - 克隆節點
    - 創建元素

DOM樹：

獲取元素

有以下幾種方式獲取元素，回傳的是一個元素物件，

var eleSelect = document.getElementById('selRate');

var lis = document.getElementsByTagName('li');

var nav = document.getElementsByClassName('nav');//H5新增獲取元素方式

//回傳指定選擇器的第一個元素物件
//H5新增獲取元素方式
var nav = document.querySelector('#nav');//id名
var li = document.querySelector('li');//標簽名
var nav = document.querySelector('.nav');//類名

var lis = document.querySelectorAll('li');//獲取所以li

注意：
getElementById() 方法可回傳對擁有指定 ID 的第一個物件的參考；getElementsByTagName() 方法獲得的是一個帶有指定標簽名的物件的集合，所以需要btn[0]呼叫；
getElementsByClassName() 方法回傳檔案中所有指定類名的元素集合；
querySelector() 方法回傳指定選擇器的第一個元素物件，

<body>
	<textarea name="" id="text" cols="30" rows="10">123</textarea>
	<button>發布</button>
	<ul>
		
	</ul>
	<script>
		//1.獲取元素
		var btn = document.getElementsByTagName('button');
		console.log(btn[0]);
		console.log(btn);
		console.log(text);
		var text = document.getElementById('text');
		console.log(text);
	</script>
</body>