一、选择元素
使用getElementById、getElementsByClassName、querySeletor选择元素
<body><div id="fatherId" class="falther">father内容<div class="child">1</div><div class="child2">2</div><div class="child">3</div><div class="child">4</div></div>
</body>
// 1、ID获取：document.getElementById获取具有指定id属性的元素（ID唯一）var element_id = document.getElementById("fatherId")console.log(element_id);// 2、className获取：document.getElementsByTagName获取指定标签的所有元素的节点列表var element_div = document.getElementsByTagName("div")console.log(element_div);// 3、标签名获取：document.getElementsByClassName获取指定类名的所有元素列表var element_class = document.getElementsByClassName("child")console.log(element_class);
二、修改元素
1、写一个修改页面中p标签的内容为“Hello,World!”的函数。
2、写一个在页面中div标签添加类名为".active"的函数。
3、写一个在页面中h1标签移除类名为".title"的函数。
<body><p>pppppp</p><div>-----</div><p>pppppp</p><div>-----</div><p>pppppp</p><div>-----</div><p>pppppp</p><div>-----</div><h1 class="title">标题</h1><h1 class="title">标题</h1><h1 class="title">标题</h1><button onclick="changP()">修改p元素内容</button><button onclick="addClassName()">添加类名到div元素</button><button onclick="removeClassName()">移除类名到div元素</button>
</body>
<script>// 1、写一个修改页面中<p>元素的内容为“Hello,World!”的函数。function changP() {let domPAll = document.getElementsByTagName('p')for (let dom of domPAll) {dom.innerHTML = "Hello,World"}}// 2、写一个在页面中<div>元素添加类名为".active"的函数。function addClassName(){let domDivAll = document.getElementsByTagName('div')for (const element of domDivAll) {element.classList.add('active')}}// 2、写一个在页面中<h1>元素移除类名为".title"的函数。function removeClassName(){let domH1 = document.getElementsByTagName('h1')for (const element of domH1) {element.classList.remove('title')}}
</script>
三、事件处理
1、点击按钮，弹框提示
2、 鼠标移入方块显示红色，鼠标移出方块显示绿色
3、事件冒泡
4、事件捕获
1、点击按钮，弹框提示
<style>.box{width: 200px;height: 200px;background-color: yellow;text-align: center;line-height: 200px;}</style>
2、 鼠标移入方块显示红色，鼠标移出方块显示绿色
<body><button onclick="clickFunc()">点击</button><div class="box" onmouseover="changeRed()" onmouseout="changeGreen()">方块</div>
</body>
<script>// 1、点击按钮，弹框提示function clickFunc(){alert("Hello World")}//2、 鼠标移入方块显示红色，鼠标移出方块显示绿色function changeRed(){document.querySelector(".box").style.backgroundColor = "red"}function changeGreen(){document.querySelector(".box").style.backgroundColor = "green"}
</script>
3、事件冒泡
<body><div class="father"><div class="child">1</div><div class="child">1</div><div class="child">1</div></div>
</body>
<script>document.querySelector(".father").onclick = function () {console.log("父级被点击");}let children = document.querySelectorAll(".child")for (const element of children) {element.onclick = function () {console.log("子元素被点击");}}/* 事件冒泡：当在一个元素上触发某个事件后，这个事件会逐级向上传递到该元素的父元素，直至传递到文档的根元素（document）。如上案例中我点击子元素child触发father事件*/
</script>
4、事件捕获
<body><div class="father"><div class="child">1</div><div class="child">1</div><div class="child">1</div></div>
</body>
<script>document.querySelector(".father").onclick = function () {console.log("父级被点击");}let children = document.querySelectorAll(".child")for (const element of children) {element.onclick = function () {console.log("子元素被点击");}}/* 事件冒泡：当在一个元素上触发某个事件后，这个事件会逐级向上传递到该元素的父元素，直至传递到文档的根元素（document）。如上案例中我点击子元素child触发father事件*/
</script>
四、创建、删除元素
1、在ul元素里新增li元素
2、删除页面第一个p元素
<body><ul><li>1</li></ul><button onclick="addLi()">新增li元素</button><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><button onclick="deleteP()">删除第一个p元素</button>
</body>
<script>function addLi() {// 创建li元素let li = document.createElement('li')li.innerText = "2"// ul元素新增li元素document.querySelector('ul').appendChild(li)}function deleteP(){let pAll = document.querySelectorAll('p')document.body.removeChild(pAll[0])}</script>五、样式操作
1、设置一个把页面所有h1元素文字变成红色的函数
2、设置一个把img元素都隐藏的函数
<h1>标题1</h1><h1>标题1</h1><h1>标题1</h1><h1>标题1</h1><h1>标题1</h1><button οnclick="changeColor()">改变全部h1颜色</button><img src="https://so2.360tres.com/dmfd/400_300_/t0110e5ad0726405f0e.jpg" alt=""><img src="https://so2.360tres.com/dmfd/400_300_/t0110e5ad0726405f0e.jpg" alt=""><img src="https://so2.360tres.com/dmfd/400_300_/t0110e5ad0726405f0e.jpg" alt=""><button οnclick="hideImg()">隐藏所有图片</button>
</body>
<script>function changeColor() {let h1All = document.querySelectorAll("h1")for (const element of h1All) {element.style.color = 'red'}}function hideImg(){let imgAll = document.querySelectorAll("img")for (const element of imgAll) {element.style.display ='none'}}
</script>
