元素查询+元素遍历与增删改常用方法 - 前端开发

首页 > 博客列表 > 元素查询+元素遍历与增删改常用方法

博主信息

博文 38

粉丝 0

访问量 31645

专题推荐

更多>

获取DOM元素的常用方法

const items = document.querySelectorAll('.list>li')
console.log(items);
const item = document.querySelector('.list>li')
console.log(item);

运行结果：

NodeList(6) [li#name, li#name, li, li, li, li]
<li id="name" style="color: red;">::marker"item1"</li>

获取元素的快捷方法

console.log(document.body);
console.log(document.head);
console.log(document.title);
// html
console.log(document.documentElement);
console.log(document.URL);

运行结果：

<body>…</body>
<head>…</head>
dom操作-获取DOM元素
<html lang="zh-CN"><head>…</head><body>…</body></html>
http://127.0.0.1:5500/Javascript/0327-1.html

元素遍历与增删改常用方法

const list = document.querySelector('.list')
let items = list.childNodes // 获得所有类型节点
items = [...items].filter(item=>item.nodeType==1)//节点类型为1为元素，3为文本
items = list.children //与上面等效，更简单
console.log(items);
// 获取元素
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);
console.log(items[items.length-1].textContent);
let four = document.querySelector('.list :nth-child(4)')
console.log(four.textContent);
console.log(four.previousElementSibling.textContent);
console.log(four.nextElementSibling.textContent);
// 父节点
let parent = four.parentElement
console.log(parent);

运行结果：

HTMLCollection(6) [li, li, li, li, li, li]
item1
item6
item6
item4
item3
item5
<ul class="list">…</ul>

 // 创建
const ul = document.createElement('ul')
// 添加
document.body.append(ul)
for(let i=0; i<6;i++){
    const li = document.createElement('li')
    li.append('item-'+(i+1))
    ul.append(li)
}
// 优化，先添加到片段，再统一添加到网页
const frag = document.createElement('ul')
document.body.append(ul)
for(let i=0; i<6;i++){
    const li = document.createElement('li')
    li.append('item-'+(i+1))
    frag.append(li)
}
ul.append(frag)
// after
const three = ul.querySelector(':nth-child(3)')
let li = document.createElement('li')
li.append('新的<li>')
three.after(li)
// 克隆
ul.append(li.cloneNode(true))

运行结果：

item-1
item-2
item-3
新的<li>
item-4
item-5
item-6
item-1
item-2
item-3
item-4
item-5
item-6
新的<li>

总结：

有些问题不理解，form.uname.value和document.forms.login.email.value的效果是一样，为什么要用复杂的方法？

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开通PHP中文网博客第一天

2023-03-08 14:59:36