24-09-07JS高阶

jsDOM

dom就是我们的标签 dom是标签的一种叫法
通过dom访问和修改操作让网页动起来
通常，通过 JavaScript，需要操作 HTML 元素：
1通过 id 找到 HTML 元素
2通过标签名找到 HTML 元素
3通过类名找到 HTML 元素

<body>
    <div id="item"></div>
    <p id="item1"></p>
    <div class="class"></div>
    <script>
        // <!-- 获取dom标签 通过id获取dom  必须以document获取开头-->
        // 通过id--->getElementById('这里添加元素') 获取dom  没有获取到对象返回null
        document.getElementById('item') 
        let a = document.getElementById('item')
        console.log(a);
        // 通过标签获取dom 必须以document获取开头
        // 通过 标签名getElementsByTagName('元素')
        let b =document.getElementsByTagName('div')
        console.log(b);
        // 通过类名找到  getElementsByClassName HTML 元素
        let c= document.getElementsByClassName('class')
        console.log(c);
        // 通过通用方法获取HTML元素 开头document 方法querySelector('这里添加元素')
        let d = document.querySelector(".class")
        console.log(d);
        // 获取多个标签querySelectorAll 写法：后面多加了一个all all是所有的意思
        let e = document.querySelectorAll("div")
        console.log(e);
    </script>
</body>

通过dom修改样式

<body>
    <div class="item">今天星期六</div>
    <script>
        // 获取dom元素获取的是对象
        let a = document.querySelector(".item")
        console.log(a);
        // 通过  .style:控制样式 修改字体 font-size 去掉- -后面的字母大写 fontSize
        a.style.fontSize="80px"
        a.style.color='red'
    </script>
</body>

获取文本内容

<body>
    <input type="text" value="输入的内容"> 
    <div class="div">今天下雨</div>
    <script>
        // 获取标签
        let a = document.querySelector('.div')
        console.log(a);
        // 获取文本 innerHTML 获取文本内容 输入框除外
        console.log(a.innerHTML);
        // 修改内容
        a.innerHTML='不下雨了'
        // 通过 .value 获取输入框的内容
        let b =document.querySelector('input')
        console.log(b.value);
    </script>
</body>

事件

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
事件是由三部分组成，事件源，事件类型，事件处理程序（事件三要素）
事件源：事件被触发的对象
事件类型：如何触发 什么事件
事件处理程序：当这个事件被触发之后会发生什么样的事情

格式：

// addEventListener函数 写事件和回调函数
DOM.addEventListener(事件,回调函数)

--click 点击事件 点击后发生什么事情

<body>
    <button>按钮</button>
    <script>
 // 获取按钮 然后存到变量btn
        let btn = document.querySelector('button')
        console.log(btn);
        // 点击按钮获得监听-->addEventListener 事件 里面有两个默认形参
        // 事件源-按钮-btn 时间类型-点击-click  实践出发之后出发弹窗-alert
        // 语法 事件源.addEventListener('这里是事件类型',()=>{这里添加触发过程('这里添加触发的结果')})
        // 触发时间 函数自动被调用
        btn.addEventListener('click',()=>{
            alert('触发时间')
        })
    </script>
</body>
#---- 练习 点击按钮 改变div的内容 innerHTML可以读取或者设置标签包裹的内容
<body>
 <!-- 创建了一个div标签 他的类名叫fun -->
 <div class="fun">床前明月光</div>
 <button>按钮</button>
 <script>  
// 1.获取按钮
let but = document.querySelector("button")//通过document.querySelector("button")获取到了按钮
// 获取类名为fun的div标签并存到变量fun中
let fun = document.querySelector(".fun")
 but.addEventListener("click",()=>{
 // innerHTML就是获取类名为fun的div的内容
fun.innerHTML = "疑是地上霜"
 })
 </script>  
</body>

change 触发事件 获取输入框值

<body>
    <h1></h1>
    <input type="text">
    <script>
        // 想拿到输入框的内容 并且渲染到页面
        let input = document.querySelector("input") //获取到输入框 并存到变量input里面去
        let h1 = document.querySelector("h1")
        // 给事件  addEventListener
        // change 表单里面的值发生改变 事件就会触发
        // 我们的事件都有回调函数 回调函数里面有一个形参e
        input.addEventListener("change", (e) => {
            // e.target.value就是我们输入的值 这个记住就行
            // console.log(e.target.value);
            // 将获取到输入框输入的值存到h1.innerHTML中
            h1.innerHTML = e.target.value
        })
    </script>
</body>

----练习代码

<body>
 <button>点击＋1</button>
 <div>0</div>
 <script>
 // 我们喜欢做一件事
// 点击按钮 让div+1
 // 获取按钮
let but = document.querySelector("button")//获取到button存到变量but中
let div = document.querySelector("div")//获取到了div存到变量div中
// 要给事件
but.addEventListener("click",()=>{
 // 我们可以把点击按钮想做的事情写在回调函数中
// innerHTML获取到里面的内容
console.log(typeof div.innerHTML);//string类型
// 为什么 div.innerHTML++ 可以进行累加
// 因为++它自己能够将内容转成数值 然后累加
div.innerHTML++
 // 这里做判断应该写整数10还是字符串10
 // 无所谓 ==只判断 值是否相等
if(div.innerHTML==10){ //如果div.innerHTML==10 内容等于10
 div.style.color = "red"//让文字颜色变为红色}})
 </script>
</body>

鼠标事件 鼠标移至 HTML 元素上方或移出元素时触发的事件

    <style>
        div {
            width: 200px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>撒大声地撒</div>
    <script>
        // 获取 div
        let div = document.querySelector('div')
        // 鼠标移入 mouseover 改变文本内容颜色 背景颜色
        div.addEventListener('mouseover', () => {
            div.style.backgroundColor = 'black'
            div.style.color = 'yellow'
            div.innerHTML = 'sadasasd'
        })
        // 鼠标移出 mouseout 恢复文本内容颜色 背景颜色
        div.addEventListener('mouseout', () => {
            div.style.backgroundColor = 'red'
            div.style.color = 'black'
            div.innerHTML = '撒大声地撒'
        })
    </script>
</body>

keydown 事件 鼠标移至 HTML 元素上方或移出元素时触发的事件


<body>

    <div>我是默认的div</div>
    <input type="text" class="input">
    <script>
        // 获取 div input
        let div = document.querySelector("div")
        let input = document.querySelector(".input")
        // 输入框按下 Enter 触发-->keydown 事件 改变div.innerHTML 内容
        input.addEventListener("keydown", (e) => {
            // e.key === "Enter" 用于检测是否按下了 Enter 键。
            if (e.key === "Enter") {
                div.innerHTML = "我触发了"
            }
        })
    </script>
</body>

停止计时器

<body>

    <button class="a">点击停止定时器</button>
    <button class="b">点击开始定时器</button>
    <script>
        // 没2秒触发的定时器存到变量 dsq中
        let dsq = setInterval(() => {
            console.log("我执行了");
        }, 2000)
        //  获取这个按钮
        let but = document.querySelector(".a")
        //  事件
        but.addEventListener("click", () => {
            // 在点击按钮以后 停止定时器
            clearInterval(dsq) // 停止定时器 必须给出停止定时器的名字
        })
        let but2 = document.querySelector(".b")
        but2.addEventListener("click", () => {
            setInterval(() => {
                console.log("我又开始执行了");
            }, 2000)
        })
    </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容