文章目录
一、获取
1.1 获取-当前元素
1.1.1 id名获取
document.getElementById("id名")
1.1.2 类名获取
//多个标签
var x = document.getElementsByClassName("class类名");
//只有一个标签,获取第n个标签。
x[n]
//当前标签,循环内常用。
x.this
1.1.3 标签获取
//多个标签
var x = document.getElementsByTagName("p");
//只有一个标签,获取第n个标签。
x[n]
//当前标签,循环内常用。
x.this
1.1.4 name名获取
//多个标签
var x = document.getElementsByName("sex");
//只有一个标签,获取第n个标签。
x[n]
//当前标签,循环内常用。
x.this
1.1.5 属性获取
//暂未找到
1.1.6 属性值获取
//暂未找到
1.2 获取-子元素
1.2.1 通过子标签名获取
//获取main(id名)中所有的子元素p
var x = document.getElementById("main").getElementsByTagName("p");
//获取main(id名)中第n个子元素p
x[n]
1.2.2 通过父节点获取
// 获取第一个子元素
父对象.firstChild
// 获取最后一个子元素
父对象.lastChild
// 获取本节点的第n+1个子节点
对象节点.childNodes[n]
// 获取本节点的所有子节点
对象节点.childNodes
1.3 获取-后代元素
//暂未找到
1.4 获取-父元素
子对象.parentNode
1.5 获取-兄元素
弟对象.previousSibling
1.6 获取-弟元素
兄对象.nextSibling
二、创建
2.1 通过createElement创建
var newnode = document.createElement("p");
2.2 通过innerHTML创建
待插入节点对象.innerHTML = "<p>"+'待插入的内容'+"</p>";
三、插入
1.1 插入新子元素(小弟)
父对象.appendChild(newchild);
1.2 插入新子元素(兄)
父对象.insertBefore(newchild,child);
1.2 插入新子元素(弟)
注意;DOM中未提供inserAfter方法,需要自己编写。
// =====================调用函数。=============================
parentelement.insertAfter(newchild,child);
// ==============创建insertAfter()函数。======================
function insertAfter(newchild,child){
// 获取后加元素(child)的父元素。
var parentelement = child.parentNode;
// 判断后加元素(child)是否最小。
if(parentelement.lastChild == child){
parentelement.appendChild(newchild);
}else{
parentelement.insertBefore(newchild, child.nextSibling);
}
}
四、删除
4.1 父知、子知
父对象.removeChild(子对象);
4.2 父未知、子知
子对象.parentNode.removeChild(子对象);
五、替换
父对象.replaceChild(新对象,原子对象);
六、克隆
需要被复制的节点.cloneNode(true/false)