DOM&&BOM

获取页面元素

getElementById  getElementsByTagName  getElementsByClassName

querySelector/querySelectorAll

getElementsByTagName由于每次获取到多个数据，组成一个伪数组，因此在对每一个数据进行操作时，要通过循环的方式进行

<div id="d">aaaa</div>

<script>
// d 中保存div标签对象
var d = document.getElementById('d');
</script>

<p>执子之手，将子拖走</p>
<p>一觉醒来，天都黑了</p>

<script>
    var pDoms = document.getElementsByTagName('p');

    for (var i = 0; i < pDoms.length; i++) {
        pDoms[i].style.color = "red";
    }
</script>

<p class="word">俺从不写错字，但俺写通假字</p>
<div class="word">执子之手，将子拖走</div>
<h1 class="word">一觉醒来，天都黑了</h1>

<script>
    var doms = document.getElementsByClassName('word');
    for (var i = 0; i < doms.length; i++) {
        console.log(doms[i]);
    }
</script>

<h1 id="book">盗墓笔记</h1>
<p class="title">鬼吹灯</p>
<span>茅山后裔</span>

<ul class="music">
    <li>星星点灯</li>
    <li>大风车</li>
    <li id="new">百战成诗</li>
</ul>

<script>
    var span = document.querySelector('span');
    console.log(span);
    
    var h = document.querySelector('#book');
    console.log(h);

    var p = document.querySelector('.title');
    console.log(p);

    var li = document.querySelector('.music #new');
    console.log(li);
</script>

<ul class="music">
    <li>星星点灯</li>
    <li>大风车</li>
    <li id="new">百战成诗</li>
</ul>

<script>
    var lis = document.querySelectorAll('ul>li');
    console.log(lis);
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
</script>

 

鼠标事件

onclick  鼠标点击事件

onmouseenter  鼠标进入事件

onmouseleave  鼠标离开事件

onmousemove  鼠标移动事件

ondblclick          双击事件

onfocus              获得焦点事件

onblur                 失去焦点事件

onsubmit            表单提交事件