html--js(笔记)--4

一 ：修改：

修改元素属性：

// 1、获取元素对象

        let img = document.querySelector('img')

        console.log(img)

        // 2、修改元素属性    元素.属性名=属性值

        img.title = "我是更改过的"

        img.src = "../imgs/guozhuangmingpin.jpg"

修改元素样式：

// 1、获取元素

        const box = document.querySelector('.box1')

        const box2 = document.querySelector('.box2')

        console.log(box)

        // 2、修改元素样式1:通过style操作---------->样式特多时，不适用

        // box.style.backgroundColor = 'pink'

        // box.style.width = "1200px"

        // 3、修改元素样式2：通过操作class名更改样式  className；原来的类名不复存在

        // box2.className = "pink"

        // 4、修改元素样式3：classList   元素对象.classList.add()：添加类名，保留原类名

        box2.classList.add('pink')

        box2.classList.remove('box2')//移除类名

        box2.classList.toggle('pink')//切换，由该类名时，删除该类名。没有该类名的时候，添加了该类名

修改表单元属性：

 // 1、获取元素对象

        const btn = document.querySelector('button')

        const ipt = document.querySelector('input')

        // 2、设置按钮可点击

        btn.disabled = false

        ipt.type = "password"

二 ：事件：

事件监听：

 // 事件监听：程序检测某事件有没有发生,一旦事件发生，立刻调用一个函数作为响应

        //

        const start = document.querySelector('button:first-child')

        const end = document.querySelector('button:nth-child(2)')

        const box = document.querySelector('.box')

        console.log(start, end)

        // 语法：元素(事件源：谁触发).addEventListener('事件（什么事件）'，执行的函数（要做什么事情，事件触发一次，执行一次），冒泡或捕获(true\false))

        // 默认冒泡

        start.addEventListener('click', function () {

            box.style.display = 'block'

        })

        function fn() {

            box.style.display = 'none'

        }

        end.addEventListener('click', fn)

加载事件：

  // 语法：元素(事件源：谁触发).addEventListener('事件（什么事件）'，执行的函数（要做什么事情，事件触发一次，执行一次），冒泡或捕获)

            start.addEventListener('click', function () {

                box.style.display = 'block'

            })

            function fn() {

                box.style.display = 'none'

            }

            end.addEventListener('click', fn)

        }

常见事件类型：

 // 点击事件   click

        // 鼠标经过    mouseenter

        // 鼠标离开     mouseleave

        // 获取焦点          focus

        // 失去焦点         blur

        // 键盘按下/弹出     keydown\keyup

        // 滚动事件 scroll

        // const ipt = document.querySelector('input')

        // ipt.addEventListener('focus', function () {

        //     ipt.style.backgroundColor = 'pink'

        // })

        // ipt.addEventListener('blur', function () {

        //     ipt.style.backgroundColor = 'green'

        // })

事件对象：

事件对象：记录事件触发的相关信息的

事件绑定：

start.onclick = function () {

            // console.log('111')

            box.style.display = 'block'

 

        }

事件委托：

 const ul = document.querySelector('ul')

        ul.addEventListener('click', function (e) {

            // console.log(e)

            e.target.style.backgroundColor = 'pink'

        })

三 ：节点：

查找节点：

 // 查找子节点：           父元素.children[]

        console.log(father.children.length)

        // father.childNodes   查找节点、文本、空格……   了解即可

 

        // 查找父节点

        console.log(son.parentNode)

 

        // 查找兄弟节点(了解即可)

 

        // son2.nextElementSibling

        // son2.previousElementSibling

克隆节点：

 const ul = document.querySelector('ul')

        console.log(ul.cloneNode(true))   //true代表子节点一起克隆

创建节点和追加节点：

 //   1、获取元素

        const ul = document.querySelector('ul')

        // 1、、创建li

        let li = document.createElement('li')

        // console.log(li)

        // 2、、给创建的节点添加内容

        li.innerHTML = `<h1>我是js创建的li</h1>`

        // 3、追加

        // 父元素  *******************************************

        // ul.append(li)  //追加到父元素的最后一个子元素

        ul.insertBefore(li, ul.children[0])//插入到指定位置的前面

删除节点：

 const ul = document.querySelector('ul')

        const li3 = document.querySelector('.three')

        // 删除节点一定是通过父元素删除

四 ：其他：

定时器：

箭头函数：

this指向：

js执行机制：

参数：

展开运算符：

用户注册倒计时：