dom节点处理

本文属于原创文章,转载请注明–来自桃源小盼的博客

原生js处理dom节点的各种方法。

html结构

<div id="content">
    <div class="left">
        left
    </div>
    <div id="main">
        main
    </div>
    <div class="right">
        right
    </div>
</div>

document.getElementById()

通过id获取dom对象,参数大写小敏感。

var ele = document.getElementById('content');  // #content

parent.getElementsByName()

通过元素的name属性来获取dom对象,返回一个数组。

var arr = document.getElementByName('user');  // [input, input]

parent.getElementByTagNmae()

通过节点名称获取dom属性,返回一个数组。(ie8只支持document对象)

var arr = document.getElementByTagName('input');  // [input, input]

parent.firstChild

获取父节点的第一个子节点,然而这是个坑,如果父节点与子节点元素之间有空格,那么获取到的第一个是个text,
实际使用时需要封装方法,加上判断nodeType是否等于1。

parent.lastChild

获取父节点的最后一个子节点,坑同上。

parent.childNodes

获取子节点数组,坑同上。

near.previousSibling

获取同辈的前一个元素,坑同上。near 代表同辈元素。

near.nextSibling

获取同辈的下一个元素,坑同上。

near.parentNode

获取父元素节点

var ele = document.getElementById('main');
var p = ele.parentNode; // .content

node.nodeName

获取节点名称

node.getAttribute()

获取节点指定属性值。

var ele = document.getElementById('main');
ele.getAttribute('id');

node.setAttribute()

设置节点指定属性值

var ele = document.getElementById('main');
ele.serAttribute('class', 'show');

document.createElement()

创建元素

parent.appendChild()

插入元素到父元素的末尾

var p = document.createElement('p');
var ele = document.getElementById('main');
ele.appenChild(p);

HTML5新增

parent.getElementsByClassName()

通过class属性获得dom对象,返回一个数组。parent作为查找根节点。

var ele = document.getElementById('content');
var arr = document.getElementsByClassName('red');
var arr = ele.getElementsByClassName('left red');

parent.firstElementChild

获取父节点的第一个子节点。

var ele = document.getElementById('content');
var first = ele.firstElementChild;  // .left

parent.lastElementChild

获取父节点的最后一个子节点。

var ele = document.getElementById('content');
var last = ele.lastElementChild;  // .right

near.previousElementSibling

获取同辈的前一个元素。

var ele = document.getElementById('main');
var prev = ele.previousElementSibling; // .left

near.nextElementSibling

获取同辈的后一个元素。

var ele = document.getElementById('main');
var next = ele.nextElementSibling;  // .right

document.querySelector()

css方式选择器,只选择匹配到的第一个。

var main = document.querySelector(‘#content #main’);

document.querySelectorAll()

css方式选择器,返回一个数组。

var main = document.querySelectorAll(‘#content div);

function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName(“*”);
for(var i=0; i<elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}