javaScript DOM - innerText与innerHtml，操作元素的属性，节点的获取，创建，添加，删除，修改

1.innerText与innerHTML

//替换元素里面的内容成文字
document.querySelector(".main").innerText="文字";
//替换元素里面的内容成标签
document.querySelector(".main").innerHTML="<h1>标题</h1>";

 

2.操作元素的属性

// 1. 获取元素的属性值：  
element.getAttribute("属性");


// 2. 设置元素的属性值：  
element.setAttribute("属性","值");


// 3. 移除元素的属性：  
element.removeAttribute("属性");


// 4 操作元素的类
// 4.1 添加一个或多个类名
element.classList.add('classone','classtwo',···);


// 4.2 删除一个或多个类名
element.classList.remove('classone','classtwo',···);


// 4.3 检索该类里是否有哪个类名
element.classList.indexOf('classname');
element.classList.contains('classname');

 

3.获取节点的方式

方式一：他不会把换行和空格也当成是节点信息

//获取子元素
document.getElementById("id").children;
//获取第一个子元素
document.getElementById("id").firstElementChild;
//获取最后一个子元素
document.getElementById("id").lastElementChild;

//获取父元素
document.getElementById("id").parentNode;
//获取所有父元素 不包含body
document.getElementById("id").offsetParent;

//获取兄弟节点
document.getElementById("id").previousElementSibling;
//获取下一个兄弟节点
document.getElementById("id").nextElementSibling;

方式二：他会把换行和空格也当成是节点信息

//获取子元素
document.getElementById("id").childNodes;
//获取第一个子元素
document.getElementById("id").firstChild;
//获取最后一个子元素
document.getElementById("id").lastChild;

//获取兄弟节点
document.getElementById("id").previousSibling;
//获取下一个兄弟节点
document.getElementById("id").nextSibling;

 

4.节点是创建，添加，删除，修改

创建节点，设置属性，添加节点

//创建节点
var element_li=document.createElement("li");
//设置属性...
//添加节点 添加到末尾
element.appendChild(element_li);
//添加节点 添加到前面
element.insertBefore(element_li);
//添加节点 指定元素前面
element.insertBefore(element_li,指定元素);

 

删除节点，复制节点

var ul=document.getElementById("ul");
//删除自己的第一个子节点,用节点的获取去做
ul.removeChild(ul.firstElementChild);

//自己删除自己
var ul=document.getElementById("ul");
ul.remove();

//复制节点
var ul=document.getElementById("ul");
ul.cloneNode(true); //false 浅拷贝只复制结构，true 深拷贝 复制结构与内容