dom节点处理

发表于 2016-04-18 更新于 2021-06-09

本文属于原创文章，转载请注明–来自桃源小盼聊技术

原生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);