目錄
一.元素的獲取方式
檔案下獲取
id獲取
類名獲取（className）
標簽名（tagName）
自定義獲取范圍
二.滑鼠事件
onmouseleave 滑鼠離開
onmouseover 滑鼠移入 /onmouseout 滑鼠移出 和 onm ouseenter 滑鼠進入 / onm ouseleave 滑鼠離開
區別：
三.元素操作
1.操作元素內容
操作表單元素內容
操作普通閉合標簽
2.操作元素屬性
2.操作元素樣式
window.onload
一.元素的獲取方式
檔案下獲取
只要在檔案中符合都會獲取到
id獲取
-
基本語法：document.getElementById(id值);
-
document：檔案，表示獲取的范圍
-
get：獲取 Element：元素 By:通過..
-
回傳的是元素物件
-
-
回傳值：獲取到了回傳具體的元素，獲取不到回傳null
-
用過id獲取只能在document下獲取，不能自定義獲取范圍
var box = document.getElementById("box1");
console.log(box);//<div id="box1">我是DIV</div>
var box = document.getElementById("box2");
console.log(box); //null
var myH2 = document.getElementById("my-h2");
console.log(myH2);類名獲取（className）
-
基本語法：document.getElementsByClassName(類名值);
-
document：檔案，表示獲取的范圍
-
get：獲取 Elements：元素（復數） By:通過..
-
得到的元素物件是動態的偽陣列
-
可以通過遍歷的形式列印出來
-
-
回傳值：獲取到了：回傳一個元素集合 HTMLCollection,這個集合由索引和值組成，0對應第一項，1對應第二項依次類推，天生自帶length屬性，最后一項的索引是集合.length -1; 獲取不到 回傳一個空集合 長度是0
-
length屬性 集合的長度 或 集合中元素的個數
-
集合.length;
-
-
獲取集合中具體元素
-
集合[索引]
-
var tests = document.getElementsByClassName("test");
console.log(tests);
console.log(tests.length); //獲取長度
// 直接輸出到控制臺
console.log(tests[0]);
console.log(tests[1]);
console.log(tests[tests.length - 1]);
// 存盤起來
var oDiv = tests[0];
var oH2 = tests[1];
console.log(oDiv, oH2);
var test1 = document.getElementsByClassName("test1");
console.log(test1, test1.length);
console.log(test1[0]);
console.log(test1[1]); //沒有這個小標或索引 相當于集合中這個位置還沒有初始化，或未定義 回傳undefined
var hello = document.getElementsByClassName("hello");
console.log(hello, hello.length);
console.log(hello[0]); //undefined標簽名（tagName）
-
基本語法：document.getElementsByTagName(標簽名);
-
document：檔案，表示獲取的范圍
-
get：獲取 Elements：元素（復數） By:通過..
-
-
回傳值：獲取到了：回傳一個元素集合 HTMLCollection,這個集合由索引和值組成，0對應第一項，1對應第二項依次類推，天生自帶length屬性，最后一項的索引是集合.length -1; 獲取不到 回傳一個空集合 長度是0
-
length屬性 集合的長度 或 集合中元素的個數
-
集合.length;
-
-
獲取集合中具體元素
-
集合[索引]
-
var oLis = document.getElementsByTagName("li");
console.log(oLis);
// 獲取長度
console.log(oLis.length);
// 獲取具體的元素
console.log(oLis[0]);
console.log(oLis[1]);
console.log(oLis[2]);
console.log(oLis[oLis.length - 1]);自定義獲取范圍
父級元素：必須是具體的元素
-
父級元素.getElementsByClassName(類名值);
-
父級元素.getElementsByTagName(標簽名);
// 獲取ol下的li
// 獲取父級元素
var wrap = document.getElementById("wrap");
console.log(wrap);
// var oLis = wrap.getElementsByClassName("test");
var oLis = wrap.getElementsByTagName("li");
console.log(oLis);
console.log(oLis.length);
console.log(oLis[0]);
console.log(oLis[1]);
console.log(oLis[oLis.length - 1]);
// 獲取ul下的li
// 獲取父級
var wrap1 = document.getElementsByClassName("wrap");
console.log(wrap1);
console.log(wrap1[0]);
console.log(wrap1[1]);
// var ullis = wrap1[1].getElementsByClassName("test");
var ullis = wrap1[1].getElementsByTagName("li");
console.log(ullis);
console.log(ullis.length);
console.log(ullis[0]);
console.log(ullis[1]);
console.log(ullis[ullis.length - 1]);二.滑鼠事件
系結事件也要是具體的元素，不能夠直接去操作集合
-
onclick 單擊事件
-
ondblclick 雙擊事件
-
onmousedown 滑鼠按下
-
onmouseup 滑鼠抬起
-
onmousemove 滑鼠移動
-
oncontextmenu 滑鼠右擊
-
onmouseover 滑鼠移入
-
onmouseout 滑鼠移出
-
onmouseenter 滑鼠進入
-
onmouseleave 滑鼠離開
<div id="box"></div>
<ul id="myUl">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var box = document.getElementById("box");
console.log(box);
var myUl = document.getElementById("myUl")
console.log(myUl);
var oLis = myUl.getElementsByTagName("li");
console.log(oLis);
// - onclick 單擊事件
box.onclick = function() {
console.log("單擊");
}
// - ondblclick 雙擊事件
oLis[0].ondblclick = function() {
console.log("雙擊事件");
}
// - onm ousedown 滑鼠按下
oLis[1].onmousedown = function() {
console.log("滑鼠按下");
}
// - onm ouseup 滑鼠抬起
oLis[1].onmouseup = function() {
console.log("滑鼠抬起");
}
// - onm ousemove 滑鼠移動
oLis[1].onmousemove= function() {
console.log("滑鼠移動");
}
// - oncontextmenu 滑鼠右擊
oLis[2].oncontextmenu = function() {
console.log("滑鼠右擊");
}
// - onm ouseover 滑鼠移入
myUl.onmouseover = function() {
console.log("滑鼠移入");
}
// - onm ouseout 滑鼠移出
myUl.onmouseout = function() {
console.log("滑鼠移出");
}
// - onm ouseenter 滑鼠進入
myUl.onmouseenter = function() {
console.log("滑鼠進入");
}
// - onm ouseleave 滑鼠離開
myUl.onmouseleave = function() {
console.log("滑鼠離開");
}
</script>onmouseover 滑鼠移入 /onmouseout 滑鼠移出 和 onm ouseenter 滑鼠進入 / onm ouseleave 滑鼠離開
區別：
onm ouseover及onmouseout不僅會觸發自身這個事件對應的事情還會將父級這個事件對應做的事情再次觸發
onm ouseenter及onmouseleave：只會觸發自身這個事件對應做的事情，不會觸發父級這個事件對應做的事情
三.元素操作
原則：給值就是設定，不給值就是獲取
元素的所有操作都必須是具體的元素,集合不能直接操作
1.操作元素內容
從元素中獲取到的內容都是字串，沒有內容獲取到的是空字串
操作表單元素內容
-
設定：表單元素.value = 值;
-
獲取：表單元素.value;
// 多次賦值后邊覆寫前邊的
// 獲取元素
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);
// 將兩個輸入框的和展示到第三個輸入框
// 系結事件
// 事件每點擊一次 函式中代碼就重新執行一次
btn.onclick = function () { //做什么事情
// 獲取兩個輸入框的值
var oneVal = inputs[0].value;
var twoVal = inputs[1].value;
console.log(oneVal, twoVal);
// 遇到字串表示拼接 先轉為數字
var total = parseFloat(oneVal) + parseFloat(twoVal);
console.log(total);
// 將和設定給第三個輸入框
inputs[2].value = total;
}操作普通閉合標簽
-
設定：表單元素.innerText/innHTML = 值;
-
獲取：表單元素.innerText/innHTML;
-
區別：innerText只能識別文本，而innHTML既可以識別文本，又可以識別標簽
var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);
// 設定：表單元素.innerText/innHTML = 值;
// 后邊設定的覆寫前邊的
// div.innerText = "我是div";
// div.innerText = "<h6>我是div</h6>";
// div.innerHTML = "我是div";
div.innerHTML = "<h6><a href='https://www.baidu.com'>我是div</a></h6>";
h2.innerHTML = "我是H2";
// 獲取：表單元素.innerText/innHTML;
console.log(div.innerText);//我是div
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com">我是div</a></h6>
console.log(p.innerText);
console.log(p.innerHTML);2.操作元素屬性
操作結構上天生自帶的屬性
-
設定：元素.屬性 = 值; 獲取不到回傳空字串
-
獲取：元素.屬性；
元素.id = 值;/元素.id;
元素.className = 值;/元素.className;
元素.title = 值;/元素.title;
...
// 獲取元素
var div = document.getElementsByTagName("div")[0];
// 設定
div.className = "myBox";
div.title = "我是div";
// 獲取
console.log(div.id);
console.log(div.className);
console.log(div.title);2.操作元素樣式
通過style屬性去操作元素樣式，只能操作元素的行內樣式
樣式屬性：在js中符合駝峰命名法 fontSize
-
設定：元素.style.樣式屬性 = 樣式值;
-
獲取:元素.style.樣式屬性；
<div>我是div</div>
<script>
// 獲取元素
var div = document.getElementsByTagName("div")[0];
// 設定
div.style.width = "300px";
div.style.backgroundColor = "yellow";
div.style.fontSize = "36px";
div.style.fontWeight = "bold";
// 獲取
console.log(div.style.width);
console.log(div.style.backgroundColor);
console.log(div.style.fontSize);
console.log(div.style.fontWeight);
// 獲取不到內部或外部樣式 行內樣式沒有 獲取到的就是空字串
console.log(div.style.height); //""
</script>window.onload
保證所有的資源（樣式，結構，圖片，音頻，視頻...）加載完畢,再去執行函式中的js代碼
-
window:屬于瀏覽器的頂層物件
-
onload ：資源加載完畢事件
window.onload = function(){
//資源加載完畢執行的js代碼
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330343.html
標籤：其他
上一篇：近萬字Vue詳細基礎教程