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、bgcitem.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/falseconst res1 = item.classList.contains("bgc");//获取item的class列表中的某一个值const res2 = item.classList.item(0);