JavaScript笔记 09

♡静

已于 2024-04-17 09:50:37 修改

阅读量1.1k

点赞数 16

文章标签： javascript 笔记前端

于 2024-03-30 16:26:30 首次发布

本文链接：https://blog.csdn.net/m0_47045804/article/details/137174147

版权

01 DOM操作事件的体验

js本身是受事件驱动的脚本语言

什么是事件?

一系列状态比如: 点击事件鼠标离开事件页面加载事件

驱动: 驱使程序动起来

页面元素绑定事件的步骤:

1.获取页面元素对象

2.元素对象.on事件名称=匿名函数(js系统提供好了很多事件)

3.在匿名函数里面定义执行的功能代码

02 获取元素对象的五种方式

获取页面元素的五种方式:

1.通过id获取元素对象

var 变量=document.getElementById('元素id')

2.通过class获取元素对象返回的是一个伪数组对象

var 变量=document.getElementByClassName('标签class属性')

不能直接拿来当做节点对象操作

要想使用其中的元素对象,必须通过伪数组[索引值]

取出里面指定索引值的元素对象再践行操作

3.通过标签名获取返回值是伪数组

var 变量=document.getElementsByTagName('标签名')

4.通过选择器获取单个元素

var 变量=document.querySelector('css选择器')

只能选中单个元素

5.通过选择器获取多个元素

var 变量=document.querySelectorAll('选择器')

伪数组:

只有索引功能和length属性但是没有数组的那些常用的函数(push pop shift...)

循环遍历伪数组:

for(var i=0;i<伪数组名.length;i++){

lis[i].style.backgroundColor='red'

}

03 事件中this指向问题

事件源:

var box=document.getElementById('box');

var box=document.querySelector('#box')

console.log(box)

事件名称事件驱动函数

事件源.on事件名称=事件驱动函数(匿名函数)

box.οnclick=function(){

alert('你好')

}

在事件当中的this 指向的是当前绑定这个事件的事件源对象

也就是本次触发这个事件的事件源

总结: 谁触发了这个事件 this就指向谁

04循环绑定事件

如果页面多个元素想要绑定同一个事件并且事件代码功能也相同,

那么就可以使用循环遍历的方式绑定.

var btnArr=document.querySelectorAll('button');

console.log(btnArr);

for(var i=0;i<btnArr.length;i++){

btnArr[i].οnclick=function(){

// 这个函数是页面加载时循环给每一个按钮绑定的事件驱动函数

// 只有点击的时候才执行里面的代码

// 页面加载时只是绑定了函数

// 所以等到函数执行的时候也就是你点击的时候页面早就加载完毕了

// 页面加载完毕了也就以为这这个循环早就结束了也就是这个循环执行完了

// 那么这个 i 变量的值就已经是5了

// console.log(btnArr[i]);

// btnArr[i].style.backgroundColor='blue'

console.log(this);

this.style.backgroundColor='blue'

}

05 DOM节点对象的常用操作

操作元素的class

获取: 元素对象.className

设置: 元素对象.className='新类名1 新类名2...'

通过className属性改变标签类名会全部设置上新赋的值

如果想要原本的类名需要在赋值的时候也增加上

设置行内样式:

元素.style.css 属性名='属性值'

操作图片标签的src属性: 图片对象.src

操作元素的title属性: 元素对象.title

小总结:

对象.属性不写等号就是获取

对象.属性=值写等号就是设置/修改

06 点亮盒子的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 500px;
            margin:50px auto;
        }
        nav>div{
            float: left;
            height: 40px;
            padding: 0 20px;
            background-color: hotpink;
            margin-right: 5px;
            cursor: pointer;
            color:#fff;
        }
        nav>div.current{
            background-color: orange;
        }
    </style>
</head>
<body>
    <nav>
        <div class="current">首页</div>
        <div>商品页</div>
        <div>购物车页</div>
        <div >个人中心</div>
        <div>联系我们</div>
    </nav>
    <script>
        // 排他思想
            // 干掉所有人 留下我自己
        var divArr=document.getElementsByTagName('div')
        // console.log(divArr);
        // 循环绑定鼠标移入事件   onmouseover  鼠标进入事件 只会触发一次
        for(var i=0;i<divArr.length;i++){
            // console.log(i);
            divArr[i].onmouseover=function(){
                // console.log(111);
                // this.style.backgroundColor='orange'
                // 排他思想 干掉所有人
                for(var i=0;i<divArr.length;i++){
                    divArr[i].className=''
                }
                // 留下我自己
                this.className='current'
            }
        }
    </script>
</body>
</html>

07 节点访问关系

利用节点与节点之间的关系找到指定的元素

获取父节点对象: parentNode

获取第一个子节点:firstElementChild

获取最后一个子节点:lastElementChild

获取上一个兄弟节点:previousElementSibling

获取下一个兄弟节点:nextElementSibling

获取所有子节点:

childNodes

children(常用)

08 设置和获取节点内容的属性

元素对象.innerHtml

元素对象.innerText

获取时:

innerHTML可以获取内部所有的内容包括标签

innerText只能后去内部素有的标签内的文本内容获取不到标签

设置时:

他们两个都能把内部的内容全部清空然后替换成我们赋值的内容

如果字符串中带有标签

那么innerHTML会把标签渲染出来呈现在页面中

innerText不会吧标签渲染出来只会按照普通字符串的形式展示

09 以上内容的小总结

元素获取的五种方式：

1.id 2.className 3.tagName 4.querySelector("选择器") 5.querySelectorAll("选择器")

this指向问题：

构造函数中的this指向新创建的对象

普通函数中的this指向函数的调用者

元素事件驱动函数中的this指向当前触发事件的那个元素

循环绑定事件：

多个元素绑定同一个事件通过this获取当前触发事件的那个元素对象

DOM节点的常用操作：

操作样式：

元素对象.style.css属性名=属性值

操作class:

元素对象.className=''

操作标签的其他的属性：

元素对象.src title href

点亮盒子：

排他思想

节点访问关系：

父节点 parentNode

第一个子节点：firstElementChild

最后一个子节点：lastElementChild

上一个兄弟：previousElementSibling

下一个兄弟：nextElementSibling

所有子节点：children childNodes(包括文本节点)

元素对象内容：

innerHTML

innerText

♡静

关注

16
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记 09

目录01 DOM操作事件的体验02 获取元素对象的五种方式03 事件中this指向问题04循环绑定事件05 DOM节点对象的常用操作 06 点亮盒子的案例07 节点访问关系08 设置和获取节点内容的属性09 以上内容的小总结 js本身是受事件驱动的脚本语言什么是事件? 一系列状态比如: 点击事件鼠标离开事件页面加载事件驱动: 驱使程序动起来页面元素绑定事件的步骤: 1.
复制链接

扫一扫