DOM操作

DOM操作

一、DOM查找

1.按照id属性，精确查找一个元素对象

var elem = document.getElementById("id");

2.按照标签名查找

var elem = parent.getElementsByTagName("tag"); // parent为节点对象，下同

查找指定parent节点下的所有标签为tag的子代节点。

3.通过name属性查找

var elem = document.getElementByName("name");

4.通过class查找

var elem = parent.getElementsByClassName("class");

5.使用CSS选择器查找

var elem = parent.querySelector("selector"); //查找一个元素
var elem = parent.querySelectorAll("selector"); //查找多个元素

二、DOM修改属性

1核心DOM

• 读取属性值

// 读取属性值
var attrNode = elem.attributes[下标/属性名];
var attrNode = elem.getAttributeNode("属性名");

var value = elem.getAttribute("属性名");

• 修改属性名

var elem = document.getElementById("id");
elem.setAttribute("属性名", value);

• 判断是否含有属性名

var bool = elem.hasAttribute("属性名");

• 删除属性名

elem.removeAttribute("属性名");

• 修改样式

elem.style.backgroundColor = "red";

三、DOM添加

1.添加元素的步骤

• 创建空元素
• 设置关键属性
• 将元素添加到DOM树

// 创建空元素
var elem = document.createElement("元素名");

// 设置关键属性
elem.innerHTML = "一段文字";
elem.href = "https://baidu.com";
// 设置关键样式
elem.style.opacity = 1; // 设置单个样式
elem.style.cssText = "width: 100px; height: 100px"; // 设置多个样式

// 将元素添加到DOM树
parentNode.appendChild(elem);
// 方式二 在指定存在节点前添加新节点
parentNode.insertBefore(newChild, existingChild);

2.添加元素优化

var frag = document.createDocumentFragment();
frag.appendChild(elems);
parentNode.appendChild(frag);