DOM&BOM

HTML DOM 教程 | 菜鸟教程 (runoob.com)

DOM树

获取页面元素

从页面中获取要操作的标签：

1. getElementById、getElementByTagName、getElementByClassName
2. querySelector、querySelectorAll

getElementById

根据id值获取标签对象（元素）

格式：document.getElementById("id值")

特点：一次只能获取一个对象

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

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

getElementsByTagName

根据标签名获取标签对象（元素）

格式：document.getElementsByTagName('标签名')

特点：一次性可获取多个标签

<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>

getElementsByClassName

根据标签类值获取标签对象（元素)(根据标签类值获取标签对象(元素)

格式：document.getElementsByClassName('类名')

特点：一次性可获取多个标签

<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>

querySelector

查询选择器

格式：document.querySelector("选择器")

获取单个标签对象

querySelectorAll

和querySelector用法一样，querySelectorAll一次性可获取多个标签对象

<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>

常用事件

简单理解为：除法–响应机制

• 事件源：触发事件的元素（绝大多数标签都能作为事件源）
• 事件类型：列入 click 点击事件
• 时间处理程序：事件触发后要执行的到吗（事件函数）

<!-- 目标：点击按钮，弹出对话框 -->
<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属性和className属性

<!-- 对象.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>

标签内容获取和修改

innerHTML、innerText：获取和修改标签内容

区别：innerText 不会识别html标签，而innerHTML会识别

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

表单操作

1. 表单的数据保存在value属性中

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

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

2. type 属性决定 input 是什么，更改 type 的值可以改变 input

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

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

自定义属性

在html5中允许通过 data-* 来设置自定义属性，存储数据

属性操作

设置属性：dom.setAttribute(‘属性名’, ‘值’);

获取属性：dom.getAttribute(‘属性名’);

移除属性：dom.temoveAttribute(‘属性名’);

节点操作

添加新节点

dom.createElement(‘div’); 创建div标签

dom.insertBefore(d1,d2 ); 在dom的子节点d2前，增加d1。

d1.appendChild(d2); 将d2对象追加到d1对象中

追加节点

开始之前、开始之后、结束之前、结束之后

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

删除节点

d1.removeChild(d2); //从d1中删除子对象d2

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

其他节点

Tab栏切换

<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>

BOM

BOM提供了一系列与浏览器窗口进行交互的对象、属性、方法

window对象是BOM的核心对象，也是顶级对象

window对象下又包含了很多对象

常用方法

alert 是 window 对象的方法

window.alert(“消息”) <===> alert(“消息”)

BOM没有通用的标准，所以在各个浏览器上显示的效果不一样

window.confirm(“消息”) \ confirm(“消息”):弹出带有确定和取消按钮的消息框

window.prompt(“提示信息”) \ prompt(“提示信息”):弹出带有提示消息的输入框

onload 事件（页面加载）

浏览器是从上向下解析html文档代码的，所以之前要求script标签写在body标签的最下面

window.onload ：页面加载事件，在页面加载完成后触发

document.DOMContentLoaded:该事件在页面DOM加载完毕后触发，不包括样式表、flash、图片等

优势︰如果页面需要加载的图片、视频等大文件特别多，则不会等待大文件全部加载完成就会触发。在一定程度上能够提高页面访问速度

onresize

onresize: 窗口大小调整事件，当窗口大小发生改变时触发