前端学习 JavaScript (dom操作)（04）
1.js如何去查找dom元素
①：通过id获取dom元素 重点
<head><title>js学习</title><style>.box{padding:20px;margin:20px;}</style></head><body><div id="context"><p>第一段文字</P><p>第二段文字</P><ul><li class="text">列表项</li><li class="text">列表项</li><li class="ptext">列表项</li></ul></div> </body><script> var context=document.getElementById("context");console.log(context);</script>
②：通过类名获取信息(class) 重点
var text=document.getElementsByClassName("text");//Elements获取多个console.log(text);
③：通过标签获取元素
var ptext=document.getElementsByTagName("p");console.log(ptext);
④：通过css选择器获取元素
var allList=document.querySelectorAll('ul li');console.log(allList);var firstList=document.querySelectorAll('ul li:first-child');console.log(firstList);var secondtList=document.querySelectorAll('ul li:nth-child(1)');//第二个列表项console.log(secondtList);
再body部分命名时id是不可重复的，但是class是可以的！！！
2.修改元素当中的内容
<div id="context" class="box">hello world</div><button ondblclick="changeContext()">修改css样式</button>
function changeContext(){var context=document.getElementById("context");//修改文本内容context.textContent='这是新的文本信息';setTimeout(()=>{//当需要插入HTML结构时，才使用innerHTMLcontext.innerHTML="<p>这是你好</p>";},2000);}
在主体部分使用ondblclick要双击按钮才会显示第二张图，因为我们设置了一个时钟所以过一会就会自动变为第三张图。
3.js修改样式信息
function changeContext(){var divDemo=document.getElementById("context");divDemo.style.color="red";divDemo.style.fontSize="20px";}
4.js的事件触发（当你在做某些操作时触发的方法）
- onclick - 鼠标单击事件
- ondblclick - 鼠标双击事件
- onmousedown - 鼠标按下事件
- onmouseup - 鼠标释放事件
- onmouseover - 鼠标悬停事件
- onmouseout - 鼠标移出事件
<div id="context"><p>第一段文字</P><p>第二段文字</P><ul><li class="text">列表项</li><li class="text">列表项</li><li class="ptext">列表项</li></ul></div>
function changeContext(){alert("我被点中了。。。。")}var divContent=document.getElementById("context");divContent.addEventListener('click',()=>{alert("点击");})
给 div 添加 ID 后，需要在 script 的第二段代码中实现点击 div 盒子的交互功能。
5.表单提交
submit：表单提交
reset：输入框当中的内容被删除
<!--表单--><form id="myForm"><input type="text" name="username" required placeholder="输入用户名"><button type="submit">提交</button><button type="reset">重置</button></form>
const form=document.getElementById("myForm");form.addEventListener('submit',(e)=>{e.preventDefault();//阻止表单默认提交(避免页面刷新)alert('表单验证通过，准备提交！');});
点击提交
点击重置会清空文本框的内容
6.文档，窗口事件
页面所有资源加载完成后提示
load:刷新事件
<!--文档，窗口事件--><img src="https://via.placeholder.com/500" alt="大图片"><!--模拟需要加载的资源-->
window.addEventListener('load',()=>{alert('页面图片、脚本等所有资源都加载完成了！');});
每次刷新页面的弹窗
7.窗口缩放时显示尺寸
<!--窗口缩放时显示尺寸--><p id="windowSize">窗口宽度:100px</p>
const sizeText=document.getElementById("windowSize");window.addEventListener('resize',()=>{sizeText.textContent='200px';});
缩放窗口显示
8.滚动页面时显示滚动距离
<!--滚动页面时显示滚动距离--><div style="height:2000px"><!--制造滚动空间--><p id="scrollPos" style="position:fixed; top:10px; right:10px;">滚动距离：0px</p></div>
const posText=document.getElementById('scrollPos');window.addEventListener('scroll',()=>{//window.scrollY是页面垂直距离滚动posText.textContent="ssss";});
滚动页面显示