js-note自用【无规律，你看不懂滴】
获取html标签并 查 增 删 改文本
[频繁的DOM操作可能会导致页面性能下降]
查html
法一·一一对应获取选择器
只可以获得 id选择器 ||元素选择器 || 类选择器[不够灵活不推荐，了解即可]
document.getElementsByTagName('li');
document.getElementsByClassName('box');
document.getElementById('secondItem');
//无需加前标# . 啥的
以getElementById为例
let block = document.getElementById('block')
console.log(block)
获取了选择器之后，log()里面就可以直接写en单词了，不用加标识符号
output
开始
法二·以1取多选择器
querySelectorAll得到的是一个nodelist对象【可以获得所有类型选择器】
let block = document.querySelector('#block')
output
开始
修改html内容 ---> 直接法
【不要求文本格式】
textContent
单个数据修改
let block = document.getElementById('block')
block.textContent = 'hi'
textContent 属性是用来获取或者设置一个元素的文本内容。但是，这个属性是存在于单个元素节点上的
不能直接给一个 NodeList 对象设置 textContent。相反，您需要遍历这个列表，并且对列表中的每个元素单独设置 textContent。
多个数据修改-->遍历nodelist
for循环
- 多个数据改成同一内容
// 修改的文本内容一样,直接操作
let block = document.getElementById('block')
console.log(block)
block.textContent = 'hi'
let contents = document.querySelectorAll('.box p')
for(let i =0;i<contents.length;i++){
contents[i].textContent = 'hi';
}
forEach函数
变量名.forEach(function(new变量名){
new变量名.operation1 2 3 4；
});
let contexts = document.querySelectorAll('.box p');
contexts.forEach(function(context) {
context.textContent = 'new'; //修改统一文本
});
- 修改的文本不一样-->设置一个数组一一对应更新
let contents = document.querySelectorAll('.box p')
let textArr = [
'hello',
'nice to meet u',
'have a good day',
'goodbye',
]
for(let i =0;i<contents.length;i++){
contents[i].textContent = textArr[i];
}
contexts.forEach((context, index) => {
if (index < textArr.length) {
context.textContent = textArr[index]; // 使用数组中的元素更新每个 <p> 元素的文本内容
}//防止越界
});
修改html内容 ---> 间接法【sibling】【parent】
获取它后，利用slibing，parent，改变它的前后元素内容，改变它的父级
改变它 --->同前文所提
I choose 将它设置一个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'
改变它的父级
更新整个盒子里的内容
.parentNode
let box = secondItem.parentNode//声明一个变量获取，然后修改内容
box.textContent = 'new page'
p.s.很有用的操作，一些实际运用
- 事件委托：
当你有一个列表，并且想要为列表中的每个项目添加事件监听器时，而不是给每个项目单独绑定事件，可以在它们的共同父元素上设置一个事件监听器。当事件发生时，你可以使用event.target.parentNode来确定事件实际发生的确切项目。
- 动态内容操作：
在需要动态添加或删除DOM元素时，经常需要访问这些元素的父节点来插入或移除子节点。
- 样式修改：
如果你想改变某个元素或其同级元素的样式，你可以通过parentNode访问到它们的共同父元素，并从那里开始修改样式。
- 表单处理：
在处理表单时，可能需要访问输入字段的父元素（如label或fieldset）来启用或禁用一组相关的输入。
- 遍历DOM：
在进行DOM遍历操作时，如深度优先搜索或广度优先搜索，parentNode属性可以帮助你向上移动到DOM树。- 模态框和弹出层：
当创建模态框或弹出层时，你可能会将它们添加到body元素的末尾，并使用parentNode来确保它们在正确的位置显示。
打印所有的标签和选择器
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>'
删除html内容
removeChild
在DOM（文档对象模型）中，要删除一个元素，通常需要通过其父元素来执行删除操作。这是因为在DOM API中，Node.removeChild() 方法是用于从父节点中移除指定的子节点。这个方法的调用者是父节点，而不是要被删除的节点本身。
假设前面有一个选择器为.list的<ul>标签
document.getElementById('list').addEventListener('click', function(event) {
// 打印出被点击的元素的标签名
console.log('Clicked element tag name:', event.target.tagName);
// 检查事件是否来自<li>元素
if (event.target.tagName === 'LI') {
// event.target.tagName 返回的标签名总是大写的。
// 使用parentNode来访问被点击的<li>的父元素，即<ul>
var list = event.target.parentNode;
// 进行一些操作，例如移除被点击的<li>
list.removeChild(event.target);
}
});
增加html标签
createElement(' ')
.innerHTML = 'new content'
<ul id="list">
<li>123</li>
<li id="imm">456</li>
<li>789</li>
<li>yes</li>
</ul>
增加到父级元素里的最后位置
父级元素.appendChild(增加html的变量名)
let list = document.querySelector('.box')
let newSpan = document.createElement('span')
newSpan.innerHTML = 'new span'
list.appendChild(newSpan)//加在list子级元素的末尾
或者用
parentElement.insertBefore(newElement, null); // 等同于 parentElement.appendChild(newElement);
增加到特定子级前面
父级.insertBefore(新的元素, 参照物)
如果参照物不存在||null，newElement将会被添加到列表的末尾。
设置参照物及其的id||class
let newSpan = document.createElement('span')
newSpan.innerHTML = 'new content'
let father = document.querySelector('#list')
let flag = document.querySelector('#imm')
father.insertBefore(newSpan,flag)
遍历，根据文本内容定位
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
var newElement = document.createElement('li');
newElement.textContent = 'New Item';
var parentElement = document.getElementById('myList');
// 获取父元素的第一个子节点
var referenceElement = parentElement.firstChild;
// 遍历子节点
while (referenceElement) {
// 检查当前子节点是否是我们想要的参照元素
// 在这个例子中，我们检查当前子节点的文本内容
if (referenceElement.textContent === 'Item 2') {
// 找到了参照元素，跳出循环
break;
}
// 移动到下一个兄弟节点
referenceElement = referenceElement.nextSibling;
}
// 使用insertBefore在新元素之前插入参照元素
parentElement.insertBefore(newElement, referenceElement.nextSibling);
增加到父级元素里的最开始的位置
.insertBefore
.firstChild
父级元素.insertBefore(newElement, parentElement.firstChild);
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)
