一、查找HTML元素

1、通過 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id
document.getElementById("id名")

<p id="intro">Hello World!</p>

<script>
var x=document.getElementById("intro");
console.log(x)
</script>

輸出 ：<p id="intro">Hello World!</p>
注：如果未找到該元素，則 返回 null。
另外 ，如果有多個id名相同的元素，使用document.getElementById方法，只會返回第一個id名相同的元素，它不會返回數(shù)組。

2、通過標簽名查找 HTML 元素
document.getElementsByTagName("標簽名")

<ul>
    <li>1</li>
</ul>
<script>
    var lis = document.getElementsByTagName("li");
    console.log(lis);
</script>

輸出 :

3、通過類名找到 HTML 元素
document.getElementsByClassName("類名")

<div class="one">盒子1</div>
<div class="one">盒子2</div>
<script>
    var divs = document.getElementsByTagName("one");
    console.log(divs);
</script>

注意：返回的也是數(shù)組?。?！要想找到第一個元素，需要 divs[0]

二、改變HTML內(nèi)容&&樣式

1、innerHTML

<p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").innerHTML="New text!";
</script>

上面的段落被一條 JavaScript 腳本修改了

若 innerHTML 里的內(nèi)容是標簽

<p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").innerHTML="<a href='#'>New text!<a>";
</script>

它會自動解析HTML標簽

innerHTML 里的內(nèi)容是空時 既 ：

<p id="p1">Hello World!</p>
<script>
   console.log(document.getElementById("p1").innerHTML)
</script>

輸出

2、innerText
它的用法和 innerHTML 相同，唯一區(qū)別是 他不可以解析標簽，只能解析文本。如：

<p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").innerHTML="<a href='#'>New text!<a>";
</script>

并沒有解析 a 標簽?。。?/p>

3、改變HTML元素的樣式

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
    document.getElementById("p2").style.color="blue";
    document.getElementById("p2").style.fontFamily="Arial";
    document.getElementById("p2").style.fontSize="larger";
</script>

運行結(jié)果：

三、常見的HTML事件

1.onclick 點擊事件

<div id="one">Hello World!</div>
<script>
  var box = document.getElementById("one")
  box.onclick=function(){
    box.innerHTML="點擊了"
    console.log("點擊了")
  }
</script>

2、onfocus && onblur

<input type="text" id="txt">
<script>
    var txt =document.getElementById("txt");
    txt.onfocus = function(){ //獲取焦點
        this.style.background="pink"
    }
    txt.onblur = function(){ //失去焦點
        this.style.background="skyblue";
    }
</script>

onfocus 獲取焦點
onblur 失去焦點

3.onmouseover && onmouseout

onmouseover -->鼠標移到某元素之上
onmouseout -->鼠標從某元素移開

<p id="test" class="animated">hello world</p>
<script>
    var test =document.getElementById("test");
    test.onmouseover =function(){ //鼠標移到元素上面之后開始shake
        this.classList.add("shake")
    }
    test.onmouseout =function(){ //鼠標離開后，去除shake動態(tài)
        this.classList.remove("shake");
    }
</script>

4.onchange

onchange 輸入框的內(nèi)容發(fā)生改變時觸發(fā)

<input type="text" id="txt">
<script>
       var txt =document.getElementById("txt");
       txt.onchange=function(){
           this.value="change"  //改變后，框內(nèi)值變?yōu)閏hange
       }
</script>

5.阻止默認行為

阻止默認行為 return false 或 event.preventDefault();

<a  id="test">hello world</a>
<script>
    var a= document.getElementById("test");
    a.onclick=function(event){
        window.location.;
        event.preventDefault(); //本來是百度，阻止了，成為了搜狗
    }
</script>

6.冒泡事件

當(dāng)子元素觸發(fā)一個事件的時候，倘若父元素也有相同的事件，父元素的事件也會觸發(fā)

 <div id="parent">
        parent
        <div id="child">child</div>
    </div>
<script>
    var parent =document.getElementById("parent");
    var child = document.getElementById("child");
    parent.onclick = function(){
        alert("parent");
    }
    child.onclick =function(event){
        alert("child");
        // 阻止事件冒泡
        event.stopPropagation();
    }
</script>

7.onresize
當(dāng)瀏覽器的窗口大小發(fā)生改變的時候觸發(fā)

window.innerWidth-->獲取瀏覽器窗口的width

<script>
    window.onresize=function(){
        alert(window.innerWidth)
    }//改變窗口大小，警告框會提示當(dāng)前寬度
</script>

8.onmouseover && onmouseout

<h1 id="one">請把鼠標移到這段文本上</h1>

<script type="text/javascript">
  var box = document.getElementById("one")
  box.onmouseover=function(){
    box.style.color='red'
  }
  box.onmouseout=function(){
    box.style.color='blue'
  }
</script>