DOM&BOM



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

DOM树

image-20220624150521054

获取页面元素

慕课:3-8 图文节-慕课网体系课 (imooc.com)

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

  1. getElementById、getElementByTagName、getElementByClassName
  2. querySelectorquerySelectorAll

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

鼠标常用事件

鼠标事件

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

键盘常用事件

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

其它事件

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

标签样式和内容设置

4-4 图文节-慕课网体系课 (imooc.com)

修改样式有两种方式: 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>
  1. type 属性决定 input 是什么,更改 type 的值可以改变 input
<input type="text" value="abc" />

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

自定义属性

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

属性操作

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

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

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

节点操作

7-5 图文节-慕课网体系课 (imooc.com)

添加新节点

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

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

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

追加节点

image-20220626172940889

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

// 创建节点
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);

其他节点

image-20220626185824044
image-20220626190122739

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对象下又包含了很多对象

image-20220626231653312

常用方法

alert 是 window 对象的方法

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

image-20220626234733410

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

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

image-20220626234744172

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

image-20220626234756153

onload 事件(页面加载)

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

window.onload :页面加载事件,在页面加载完成后触发

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

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

onresize

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

DOM&BOM-HuaのJava之旅
DOM&BOM
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片