收藏
批改状态：未批改
老师批语：
1.使用选择器是最方便的(document.*)
2.获取元素后对dom元素操作（增删改查）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取dom</title></head><body><ul id="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><!-- 表单 --><form action=""><input type="text"></form><script src="js01.js"></script></body></html>
const lis = document.querySelectorAll("#list li");console.log(lis);
first = document.querySelector("#list li");console.log(first)
htl = document.documentElement;console.log(htl)
bod = document.head;console.log(bod)
bod = document.head;console.log(bod)
bod = document.title;console.log(bod)
// document.forms得到是一个集合，用索引取值bod = document.forms[0];console.log(bod);
html部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取dom</title></head><body><ul id="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><!-- 表单 --><form action=""><input type="text"></form><script src="js01.js"></script></body></html>
// 获取该元素的父元素const lis= document.querySelector("#list");// 创建该元素const li =document.createElement('li');// 添加该元素li <li class="item"></li>lis.appendChild(li);// 写入文本li.innerText='item6'
// 获取该元素const lis= document.querySelector("#list");// 定义一个元素字符串let htmlstr = '<li class="item">7</li>';// 使用insertAdjacentHTML方法，第一个参数是位置，第二个参数是添加元素lis.insertAdjacentHTML("beforeend",htmlstr)
// 获取该元素const lis = document.querySelector("#list");// 定义一个元素字符串let htmlstr = '<li class="item">7</li>';// 使用insertAdjacentHTML方法，第一个参数是位置，第二个参数是添加元素lis.insertAdjacentHTML("beforeend", htmlstr);// 使用模板字符串htmlStr = `<li style="color:violet">demo1</li><li style="color:violet">demo2</li><li style="color:violet">demo3</li><li style="color:violet">demo4</li><li style="color:violet">demo5</li>`;lis.insertAdjacentHTML("afterBegin", htmlStr);
改(第一步不用获取)
// 定义改变的元素const gg = document.createElement("gg");// 添加赋值字符串gg.innerHTML="老板好";// 替换的元素document.querySelector("li:nth-of-type(3)").replaceWith(gg)
删
const lis = document.querySelector("#list")lis.removeChild(document.querySelector("#list li:nth-of-type(3)"));
查
// 获取该元素const lis = document.querySelector("#list");// 获取所有子元素console.log(lis.children);// 获取子元素数量console.log(lis.children.length);console.log(lis.childElementCount);// 第一个子元素console.log(lis.firstElementChild);// 最后一个console.log(lis.lastElementChild);// 父节点console.log(lis.lastElementChild.parentElement);// 前一个兄弟(第三个前一个是第二个)const san = document.querySelector("#list li:nth-of-type(3)");san.style.background = "yellow";console.log(san.previousElementSibling.innerHTML);// 后一个兄弟(第三个前一个是第四个)console.log(san.nextElementSibling.innerHTML);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
