获取html标签并修改文本

获取html

法一·getElementById只可以获得id[不推荐，了解即可]

        let block = document.getElementById('block')

法二·querySelectorAll得到的是一个nodelist对象【可以获得所有类型选择器】

获取了选择器之后，log()里面就可以直接写en单词了，不用加标识符号

    let block = document.querySelector('#block')

直接修改文本内容【不要求文本格式】

textContent

textContent 属性是用来获取或者设置一个元素的文本内容。但是，这个属性是存在于单个元素节点上的
不能直接给一个 NodeList 对象设置 textContent。相反，您需要遍历这个列表，并且对列表中的每个元素单独设置 textContent。

遍历nodelist

forEach函数

// 统一修改，一般不会
    变量名-s.forEach(function(变量名){
    operation1 2 3 4；
    
    });
    let contexts = document.querySelectorAll('.box p'); // 选择所有类名为 'box' 的元素内的 <p> 元素
    contexts.forEach(function(context) {
        context.textContent = 'new'; //修改统一文本
    });
// 修改特异性文本 -> 箭头函数
        contexts.forEach((context, index) => {
    if (index < textArr.length) {
        context.textContent = textArr[index]; // 使用数组中的元素更新每个 <p> 元素的文本内容
    }//防止越界
});

赋值法

修改特异性文本 better

 let contexts = document.querySelectorAll(' .box p')// 里面可以放任何选择器，和css规则一致

        let textArr = [
            '777777777',
            '888888888',
            '999999999',
        ]
        for(let i = 0; i < contexts.length; i++){
            contexts[i].textContent = textArr[i]
        }
        console.log(contexts)//获取了选择器之后，log()里面就可以直接写en单词了，不用加标识符号

改变某个元素，改变它的前后元素内容，改变它的父级

改变它

将它设置一个class或者id，然后用querySeletor获取这个元素，再用textContent修改

    let secondItem = document.querySelector('#secondItem')
    secondItem.textContent = 'change the second one'  

改变它的前后元素

同上，只是需要加一点标识符，让编译器识别
.previousElementSibling
.nextElementSibling

    secondItem.previousElementSibling .textContent = 'change the one that before secondItem'
        //previousElementSibling      sibling:子级元素，同辈之间
    secondItem.nextElementSibling.textContent = 'change the one that after secondItem'

改变它的父级

更新整个盒子里的内容
secondItem.parentNode

    let box = secondItem.parentNode//声明一个变量获取，然后修改内容
    box.textContent = 'new page'

打印所有的标签和选择器

    let box = secondItem.parentNode//获取父元素
    console.log(box)
    // box.textContent = 'new page'//-->更新整个盒子，盒子里所有东西都被覆盖了
    let items = box.children
    console.log(items)//打印.box里的所有子级标签

间接修改文本内容【要求格式】

格式就先用css写好，然后用js手段实现切换
不可以用textContent

.innerHTML

let block = document.querySelector('.block')
    block.innerHTML = '普通内容<span class = "newStyle">加粗的文本</span>'

css和js的样式处理

直接在js里设置css样式【不推荐/简单修改】

变量.style.css的属性(height width color)

（没有代码提示，使得js冗杂。-连接的，去掉-，换成大写，如：fontSize）

let block = document.querySelector('#block')
block.style.height = '80px'
block.style.width= '80px'
block.style.fontSize = '18px'
block.style.backgroundColor = 'tomato'

先准备好一个更改后css的样式，再用js实现类名切换

    let block = document.querySelector('#block')
    block.className = 'changeStyle'//改变类名函数

.changeStyle{
    width: 80px;
    height: 80px;
    color: #fff;
    background-color: tomato;
}

事件交互

.addEventListener

.addEventListener('click',function(){
operation
})

    let block = document.querySelector('.block')
    block.addEventListener('click',function(){
        alert('surprise!')
    })
    block.addEventListener('click',function(){
    alert('surprise again!')    
    })

好的，看来你对网页事件交互有点兴趣。除了click事件，还有很多其他的事件可以用来响应用户的操作。这里给你列举一些常用的事件：

• 鼠标事件：
  mousedown：当鼠标按钮被按下时触发。
  mouseup：当鼠标按钮被释放时触发。
  mousemove：当鼠标在元素上移动时触发。
  mouseover：当鼠标指针移动到元素上时触发。
  mouseout：当鼠标指针移出元素时触发。
  dblclick：当鼠标双击元素时触发。
• 键盘事件：
  keydown：当键盘按键被按下时触发。
  keyup：当键盘按键被释放时触发。
  keypress：当键盘按键被按下并释放时触发。
• 表单事件：
  submit：当表单提交时触发。
  change：当表单元素的内容改变时触发（如选择下拉列表的选项）。
  focus：当元素获得焦点时触发。
  blur：当元素失去焦点时触发。
• 文档/窗口事件：
  load：当页面完全加载后触发。
  unload：当用户离开页面时触发。
  resize：当窗口或框架的大小变化时触发。
  scroll：当用户滚动页面时触发。
• 触摸事件（用于移动设备）：
  touchstart：当触摸点接触触摸屏时触发。
  touchmove：当触摸点在触摸屏上移动时触发。
  touchend：当触摸点离开触摸屏时触发。

定时器

setInterval 开始计时

setInterval(function(){
operation
},时间)

setTimeout 结束清空计时

setTimeout(function(){
clearInterval(timer)//固定，记忆
}, 时间)

    let timer = setInterval(function(){
        console.log('每隔2s输出一次')
    }, 2000)/*一直计时*/
    setTimeout(function(){
        clearInterval(timer)
    }, 8000)/*结束计时*/

轮播图制作

控制类名active实现出现与消失，要让出现的类名有唯一性

    let carousel = document.querySelector('#carousel')
    let items = carousel.children

鼠标点击交互事件，实现翻页

    let prev = document.querySelector('#prev')
    let next = document.querySelector('#next')
    next.addEventListener('click',function(){
        items[index].className = ''/*先取消所有的active*/
        // 使得之后active的唯一性
        if(index === items.length - 1){/*到最后一张了*/
            index = -1/*因为下一步要+1，所以设置为-1*/
        }
        index ++
        items[index].className = 'active'
    })
    // prev.addEventListener同理

timer实现轮播

计时器代替了我们的点击动作，把点击的动作copy过来

        setInterval(function(){
            items[index].className = ''/*先取消所有的active*/
            if(index === items.length - 1){/*到最后一张了*/
                index = -1/*因为下一步要+1，所以设置为0*/
            }
            index ++
            items[index].className = 'active'

        }, 5000)