JavaScript学习-标签操作

一、获取

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)