DOM操作 - - php.cn博客

获取dom

1.使用选择器是最方便的(document.*)
2.获取元素后对dom元素操作（增删改查）

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.querySelectorAll("#list li");
console.log(lis);

获取满足条件的第一个元素

first = document.querySelector("#list li");
console.log(first)

获取html

htl = document.documentElement;
console.log(htl)

获取head
```
bod = document.head;
console.log(bod)
```
获取body
```
bod = document.head;
console.log(bod)
```
获取title
```
bod = document.title;
console.log(bod)
```

获取表单数据

// document.forms得到是一个集合，用索引取值
bod = document.forms[0];
console.log(bod);

dom增删改查

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);