DOM 元素的基本操作

HTML 代码:

<body>
  <ul>
    <li>item01</li>
    <li>item02</li>
    <li>item03</li>
    <li>item04</li>
    <li>item05</li>
    <li>item06</li>
    <li>item07</li>
    <li>item08</li>
    <li>item09</li>
    <li>item10</li>
  </ul>
  <form action="" name="login" id="form1">
    <input type="text" name="username" value="admin@php.cn" />
  </form>
</body>

查找元素

//获取选择器选中的元素，返回一个NodeList集合
const lis = document.querySelectorAll("li");
//获取选择器选中的元素集合中的第一个元素
const liFirst = document.querySelector("li");
//获取html和body元素
const html = document.documentElement;
const body = document.body;
//获取表单元素：
//获取页面中的所有表单，返回HTMLCollection集合
const forms = document.forms;
//获取表单集合中的某一个表单(通过表单的name或id属性，使用点语法)
const form1 = forms.form1;
const f1 = forms.login;
//获取表单里面的子元素，通过name属性
const username = forms.login.username;
//获取表单元素的值
const userNameText = forms.login.username.value;

增加元素

//方法一:
//1.创建div元素
const div = document.createElement("div");
//2.将div追加到body中
document.body.append(div);
//方法二：
//1.创建p元素
const p = document.createElement("p");
p.append("我是新来的");
//将p元素插入到div的起始标签后面
div.insertAdjacentElement("afterbegin", p);

删除元素

let item = document.querySelector("li:nth-of-type(4)");
//调用父元素的removeChild方法删除子节点
item.parentElement.removeChild(item);

修改元素

item = document.querySelector("li:nth-of-type(3)");
//innerText:纯文本，会覆盖原来内容
item.innerText = "我是innerText进来的";
//innerHTML:支持html标签，会覆盖原来内容
item.innerHTML = "<span style='color:red'>我是innerHTML进来的</span>";
//append:纯文本，追加内容
item.append("我是append进来的");

dataset 对象

dataset 对象是用来处理自定义属性的，使用时自定义属性名前要加“data-”前缀，获取时用 dataset.属性名（属性名前不加 data-前缀）。

item = document.querySelector("li:nth-of-type(2");
//1.使用getAttribute()方法获取data-index属性的值
index = item.getAttribute("data-index");
//2.使用dataset对象获取自定义属性的值（前面不用加data-前缀）
index = item.dataset.index;

classList 对象

classList 对象可以方便的操作元素的 css 类。

item = document.querySelector("li:first-of-type");
//1.给item的class列表中添加cyan、bgc
item.classList.add("cyan", "bgc");
//2.将item的class列表中的cyan删除
item.classList.remove("cyan");
//3.操作item的class列表中的font20，有则删除，无则添加
item.classList.toggle("font20");
//4.返回item的class列表集合（DomTokenList集合）
const res = item.classList;
//5.判断item的class列表中是否包含bgc，返回true/false
const res1 = item.classList.contains("bgc");
//获取item的class列表中的某一个值
const res2 = item.classList.item(0);

DOM 元素的基本操作

DOM 元素的基本操作

查找元素

增加元素

删除元素

修改元素

dataset 对象

classList 对象

更多相关文章

随机推荐