Javascript之内置的DOM操作属性和方法

DOM： Document Object Model；
获取页面中元素的方法：

document.getElementById();

context.getElementsByTagName(TAGNAME) ->把指定容器内的所有的子子孙孙辈分的所有标签名为TAGNAME的都获取了

context.getElementsByClassName(ClassName) -> 在IE6~8不兼容

document.getElementsByName() ->此方法在IE6~8只对表单元素起作用

document.body

document.documentElement

contect.querySelector/context.querySelectorAll 在IE6~8不兼容，通过此方法获取的节点集合不存在DOM映射

描述节点和节点之间关系的属性(在标准的浏览器中会把空格和换行都当做文本节点处理)

childNodes 获取所有子节点

children -> 在IE6~8下获取的结果和在标准浏览器下获取的结果是不一样的

parentNode

previousSibling/previousElementSibling //获取上一个兄弟元素 但是后面的在IE6~8下是不兼容的

nextSibling/nextElementSibling

lastChild/lastElementChild

firstChild/firstElementChild

动态操作DOM的方法：增删改

createElement

document.createDocumentFragment()

appendChild

insertBefore

cloneNode(true/false)

replaceChild

removeChild

get/set/removeAttribute

//结下来写的所有的方法在jquery中的作用和方法名是一样的

//->function children ->获取某一个容器中所有的子节点(还可以筛选出指定标签名)

//-> function getElementClass -> 通过元素的样式类名获取一组元素，兼容所有浏览器(jq中没有这个方法名，但是jq的一部分选择器也是基于这个方法的原理来实现的)

//获取上一个哥哥元素节点(prev)，获取下一个弟弟元素节点(next)，获取所有的兄弟元素节点(prevAll/nextAll)，获取相邻的两个元素节点(sibling)，获取所有的兄弟元素节点(siblings)，获取第一个元素子节点(firstChild)，获取最后一个元素子节点(lastChild)，index获取当前元素的索引，prepend和appendChild增加到某一个容器的开头，insertAfter和insertBefore 对应，增加到某一个元素的后面

addClass增加class类名，removeClass删除class类名，hasClass判断是否存在样式类名

//jquery：css方法包括下面三个方法

getClass获取Class类名，setClass设置Class类名，setGroupCss批量设置Class类名

childern方法：获取curEle下所有元素的子节点，兼容所有的浏览器，如果传递了tagName，可以在获取的集合中进行二次筛选，把指定的标签名获取出来

//首先获取所有的子节点(childNodes),在所有的子节点中把元素几点都筛选出来(nodeType === 1)
//如果多传递一个标签名的话,我们还要把获取的子元素集合中把对应的标签名进行二次筛选
function childern(curEle, tagName) {
var nodeList = curEle.childNodes;
var ary = [];
//IE5~8不能使用childern属性,我们自己写代码程度
if (/MSIE (6|7|8)/i.test(navigator.userAgent)) {
for (var i = 0, len = nodeList.length; i < len; i++) {
if (nodeList[i].nodeType === 1) {
ary[ary.length] = nodeList[i]
}
}
} else {
//标准浏览器中,我们直接使用childern,但是这样获取的是元素集合(类数组),
为了和IE6~8下保持一致,我们借用数组原型上的slice,把类数组转换成数组
ary = Array.prototype.slice.call(curEle.childern)
}
//进行二次筛选
if (typeof tagName === 'string') {
for (var k = 0; k < ary.length; k++) {
var curEleNode = ary[k];
if (curEleNode.nodeName.toLocaleLowerCase()
!== tagName.toLocaleLowerCase()) {
//说明不是想要的元素标签
ary.splice(k, 1);
k--;
}
}
}

return ary;
}

prev:获取上一个哥哥元素节点

function prev(curEle) {
if (/MSIE (6|7|8)/i.test(navigator.userAgent)){
return curEle.previousElementSibling;
}else {
//不兼容IE浏览器,判断上一个哥哥节点是否是元素节点,如果不是,基于当前继续找上面的
哥哥的节点...一直找到为止,如果没有哥哥元素节点,返回null
var pre = curEle.previousSibling;
while (pre && pre.nodeType !== 1){
pre = pre.previousSibling;
}
return pre;
}
}

next:获取下一个弟弟元素节点

function next(curEle) {
if (/MSIE (6|7|8)/i.test(navigator.userAgent)){
return curEle.nextElementSibling;
}else {
var nex = curEle.nextSibling;
while (nex && nex.nodeType !== 1){
nex = nex.nextSibling;
}
return nex;
}
}

prevAll:获取所有的哥哥的元素节点

function prevAll(curEle) {
var ary = [];
var pre = prev(curEle);
while (pre){
ary.unshift(pre);
pre = prev(pre)
}
return ary;
}

nextAll:获取所有的弟弟元素节点

function nextAll(curEle) {
var ary = [];
var nex = next(curEle);
while (nex){
ary.push(nex);
nex = next(nex)
}
return ary;
}

sibling：获取相邻的两个元素

function sibling(curEle) {
var pre = prev(curEle);
var nex = next(curEle);
var ary = [];
pre?ary.push(pre):null;
nex?ary.push(nex):null;
return ary;
}

siblings：获取所有的兄弟元素

function siblings(curEle) {
return prevAll(curEle).concat(nextAll(curEle))
}

index:获取当前元素的索引值

function index(curEle) {
return prevAll(curEle).length
}

firstChild:获取当前元素的第一个子元素节点

function firstChild(curEle) {
var childs = childern(curEle);
return childs.length>0?childs[0]:null;
}

lastChild:获取当前元素的最后一个子节点元素

function lastChild(curEle) {
var childs = childern(curEle);
return childs.length>0?childs[childs.length-1]:null;
}

append:向指定容器的末尾追加元素

function append(newEle, container) {
container.appendChild(newEle)
}

prepend:向指定容器的开头追加元素 -> 把新的元素添加到容器中第一个子元素节点的前面

function prepend(newEle, container) {
var firstChild = firstChild(container);
if(firstChild){
container.insertBefore(newEle,firstChild)
return
}
//如果一个元素都没有,就放在末尾就行了
container.appendChild(newEle)
}

insertBefore:把新元素(newEle)追加到指定元素(oldEle)的前面

function insertBefore(newEle, oldEle) {
oldEle.parentNode.insertBefore(newEle, oldEle)
}

insertAfter:把新元素(newEle)追加到指定元素(oldEle)的后面，相当于追加到oldEle弟弟元素的前面

function insertAfter(newEle, oldEle) {
var nex = next(oldEle);
if(nex){
oldEle.parentNode.insertBefore(newEle, nex)
return;
}
//如果弟弟不存在的话,也就是说当前的元素就是最后一个了,把新元素放在最后面就行了
oldEle.parentNode.appendChild(newEle)
}

hasClass：验证当前元素中是否包含className这个样式类名

function hasClass(curEle, className) {
//        curEle.className  -> "box bg"
var reg = new RegExp("(^| +)" + className + "( +|$)");
return reg.test(curEle.className)
}

addClass：给元素增加样式类名

function addClass(curEle, className) {
//为了防止className传递过来的值包含多个样式类名,我们把传递进来的字符串按照一到多个空格拆分成数组中的每一项
var ary = className.split(/ +/g);
//循环数组,一项一项进行验证增加
for (var i, len = ary.length; i < len; i++) {
var curName = ary[i]
if (!hasClass(curEle, curName)) {
curEle.className += " " + curName;
}
}

}

removeClass：移除元素样式名称

function removeClass(curEle, className) {
var ary = className.split(/ +/g);
for (var i, len = ary.length; i < len; i++) {
var curName = ary[i]
if (hasClass(curEle, curName)) {
var reg = new RegExp("(^| +)" +curName+ "( +|$)", "g");
curEle.className = curEle.className.replace(reg, " ");
}
}
}

getElementsByClass:通过元素的样式类名来获取元素集合

//className:要获取的样式类名(可能是一个也可能是多个)
//context:获取元素的上下文,如果这个值不穿的话,默认为document
function getElementsByClass(className, context) {
context = context || document;
//去除开头和结尾空格
var classNameAry = className.replace(/(^ +| +$)/g, '').split(/ +/g);
var ary = [];
//获取制定上下文中的所有的元素标签,循环这些标签,获取每一个标签的ClassName样式类名的字符串
var nodeList = context.getElementsByTagName('*');  //获取所有元素标签
for (var i = 0, len = nodeList.length; i < len; i++) {
var curNode = nodeList[i];
//判断curNode里面的className是否包含全部的classNameAry中的每一项,如果都保航,就是想要的,
否则就不是想要的
var isOk = true; //->假设curNode中包含了所有的样式
for (var k = 0; k < classNameAry.length; k++) {
var curName = classNameAry[k];
var reg = new RegExp("(^| +)" + curName + "( +|$)");
if (!reg.test(curNode.className)) {
isOk = false;
break;
}
}
if (isOk) { // 拿每一个标签分别和所有的样式类名比较后,如果结果还是true的话,说明当前元素标
签包含了所有的样式,也是我们想要的
ary.push(curNode)
}
}
return ary;
}
console.log(getElementsByClass('  w3    w1'));