DOM&BOM

<p id="one">Java,从入门到入土！</p>

<script>
    // 获取标签id
    var pDOM = document.getElementById('one');
     // 打印出获取的标签对象（元素）
    console.log(pDOM);
    // 打印出标签对象的细节
    console.dir(pDOM);
    pDOM.style.color = 'red';
</script>

<p>JavaScript修仙之旅</p>
<p>欲练此功，必现脱发</p>

<script>
    var pDoms =     document.getElementsByTagName('p');
    // console.log(pDoms);
    for (var i = 1; i < pDoms.length; i++) {
        pDoms[i].style.color = 'blue';
    }
</script>

<p class="word">数钱数到手抽筋</p>
<div class="word">一觉睡到自然醒</div>
<h1 class="word">煲剧、抖音刷不停</h1>
<script>
    var arr = ['red', 'green', 'blue']; 
    var doms = document.getElementsByClassName("word");
    // console.dir(doms);
    for (var i = 0; i < doms.length; i++) {
    doms[i].style.color = arr[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 book = document.querySelector('#book');
    // console.log(book);
    // var doms = document.querySelector('.music #new');
    // console.log(doms);

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

<!-- 目标：点击按钮，弹出对话框 -->
<button>点我</button>

<script>
    // 1.获取事件源
    var btn = document.querySelector('button');
    // 2.点击事件
    btn.onclick = function () {
           alert("我被点了一下");
    }
</script>

<div></div>

<script>
    var d = document.querySelector('div');
    // 鼠标进入事件
    d.onmouseenter = function () {
        console.log("我进来了");
    }
    // 鼠标移出事件
    d.onmouseleave = function () {
        console.log("我出来了")
    }
    // 鼠标移动事件
    d.onmousemove = function () {
        console.log("打我啊");
    }
    // 鼠标点击事件
    d.onclick = function () {
        console.log("我被打了");
    }
</script>

    <input type="text">
    <br><br>

    <textarea></textarea>

    <script>
        var input = document.querySelector('input');
        // 目标1：在单行文本框上注册keyup事件，将文本框中的内容输出到终端
        /* input.onkeyup = function () {
            // this指向时间的调用者
            console.log(this.value);
        } */
        // 目标2：在单行文本框上注册keydown事件，将文本框中的内容输出到终端
        /* input.onkeydown = function () {
            console.log(this.value);
        } */
        // 目标3：在单行文本框上注册keypress事件，将文本框中的内容输出到终端
        /* input.onkeypress = function () {
            console.log(this.value);
        } */
        // 目标4：在多行文本框上注册keyup事件，将文本框中的内容输出到终端
        document.querySelector('textarea').onkeyup = function () {
            console.log(this.value);
        }
    </script>

    <div>标题</div>
    <form action="#">
        账号：<input id="account" type="text" placeholder="账号"><br>
        密码：<input id="password" type="password" placeholder="密码">
        <button type="submit">提交</button>
    </form>

    <script>
        document.querySelector('div').ondblclick = function () {
            alert("双击事件");
        }

        var account = document.querySelector('#account');
        account.onfocus = function () {
            console.log('获取焦点');
        }

        account.onblur = function () {
            console.log('失去焦点');
        }

        document.querySelector('form').onsubmit = function () {
            alert('表单正在提交');
        }
    </script>

<!-- 对象.style -->
<p>VS code 6666</p>
<script>
    var vsc = document.querySelector("p");
    // 可对象.style的方式，也可对象.className
    vsc.style.textAlign = 'center';
    vsc.style.backgroundColor = '#eee';
    vsc.style.fontSize = '20px';
    vsc.style.fontWeight = '700';
    console.dir(vsc.style);
</script>
<!-- 对象.className -->
<style>
    .title {
        text-align: center;
        background-color: #eee;
        font-size: 20px;
        font-weight: 700;
    }
</style>
<script>
    vsc.className = "title";
</script>

<div>今天玩宝宝荣耀了吗？</div>
<script>
    var d = document.querySelector("div");
    // console.dir(d);
    // console.dir(d);
    // d.innerHTML = "<h1>今天没有玩宝宝荣耀！</h1>"
    // d.innerText = "<h1>今天没有玩宝宝荣耀！</h1>"
</script>

<input type="text" value="abc" />

<script>
document.querySelector('input').value;            // 获取input中的值
document.querySelector('input').value = 'aaa';    // 设置input中的值
</script>

<input type="text" value="abc" />

<script>
document.querySelector('input').type = 'password';       // 将当行文本框改为密码框
</script>

// 创建节点
var divDom = document.createElement('div')；
// 添加节点
var ul = document.querySelector('ul');
ul.insertAdjacentHTML('beforebegin',divDom);

var q = document.querySelector('#q');
var w = document.querySelector('#w');
q.removeChild(w);

<script>
    var lis = document.querySelectorAll('li');
    var diva = document.querySelectorAll('.content > div');

    lis.forEach(function (item, index) {
        item.onclick = function () {
            // 循环将所有li标签class值清空
            lis.forEach (function (val, i){
                val.className = '';
            })
            this.className = 'active';

            diva.forEach(function (val, i){
                val.className = '';
            })
            diva[index].className = 'current';
        }
    })
</script>