猎取文档元素

2024年4月8日 129次阅读 来源: GongChao

DOM供应了许多体式格局猎取文档元素, 能够很轻易的查询文档中一个或许多个元素[一组元素鸠合], 有以下几种体式格局:

经由历程指定的元素id属性(attribute) – [getElementById]

经由历程指定的name属性 – [getElementsByName]

经由历程指定的标署名 – [getElementsByTagName]

经由历程指定的CSS Class名 – [getElementsByClassName]

经由历程婚配的CSS选择器 – [querySelector/querySelectorAll]

搜检对应的HTML元素是不是于参数选择器婚配 – [matchesSelector]

一些特别鸠合

经由历程id属性猎取元素
任何HTML元素都能够定义id属性, 然则一般它在文档中是唯一的. 因此我们一般运用id猎取到的只是一个自力的唯一的元素对象. 我们能够运用Document对象的getElementById()要领猎取指定的id的元素对象.

document.getElementById(‘id’);
假如在婚配的历程当中不存在参数中通报的响应的id元素, 则getElementById()要领返回null. id参数的婚配历程当中辨别大小写, 然则在IE8之前的版本中getElementById()要领并不辨别ID的大小写, 而且假如页面中存在多个同名的ID元素, 这个要领只会返回婚配第一个元素对象.

运用getElementById()要领猎取到的是一个元素对象, 因此这个对象也有属性和要领. 便能够运用效果对象的相干属性和要领举行其他操纵. 如:

var dom = document.getElementById(‘id’);
dom.style.backgroundColor = ‘#FFF’;
注重: 在IE8之前的版本中, getElementById()要领会婚配name属性与id同名的表单元素. 因此假如须要确保不会猎取到表单元素, 须要在页面中保证不会涌现name值与id名雷同的表单元素.

经由历程name属性猎取元素
getElementsByName()要领是只要HTMLDocument范例才有的要领, 因此它只对HTML文档可用. 它用于返回具有指定name特征的一切元素, 即一个NodeList对象(相当于一个包括一组Element对象的只读数组). 注重这里name属性不一定是单个的元素, 多是一组元素的鸠合(HTMLCollection). 比方具有雷同name属性值的一组表单元素(单选或许复选框).

document.getElementsByName(‘name’);
getElementsByName()要领返回的NodeList对象也有许多属性和要领, 一样能够应用它的属性和要领举行其他操纵.

注重: 在某些版本的IE中getElmentsByName()要领会婚配具有同名id属性值的元素. 因此须要警惕的防止.

经由历程HTML标署名猎取元素
Document对象有一个getElementsByTagName()要领, 它接收一个HTML标署名作为参数, 并获得婚配一切的婚配的标署名的元素, 它也返回一个NodeList对象. 返回的元素鸠合根据这些元素在文档中的递次排列.

document.getElementsByTagName('div'); // 猎取文档中的一切div元素
document.getElementsByTagName('p'); // 猎取文档中的一切p元素
document.getElementsByTagName('*'); // 猎取文档中的一切元素

getElementsByTagName()不仅可用于Document对象, 它还能够基于现有的Element对象, 猎取其子女元素.

var firstDiv = document.getElementsByTagName('div')[0];
var spans = firstDiv.getElementsByTagName('span'); // 猎取文档中第一个div中的一切span元素

一样的, 运用getElementsByTagName()要领猎取的NodeList也有许多属性和要领, 能够应用相干的属性和要领举行其他操纵. 下面展现了几个罕见的属性和要领.

var div = document.getElementsByTagName('div');
div.length; // 猎取文档中div的数目
div[0].id; // 猎取文档中第一个div的id属性值, 假如它存在
div.item(0).id; // 经由历程NodeList的item要领猎取文档中第一个div的id属性值

var images = document.getElementsByTagName('img');
images.nameItem('name'); // 猎取images鸠合中具有name属性值的元素

注重:

getElememtsByTagName();不辨别HTML标签的大小写.

在初期版本的IE中, 因为解释被完成为元素, 因此document.getElementsByTagName(‘*’);也会返回一切的解释节点.

经由历程ClassName猎取元素
HTML5中添加了一个getElementsByClassName()要领用于猎取指定className(class在JavaScript中是关键字, 因此在DOM操纵中运用className替换)值的元素. 这个要领能够经由历程Document对象或许现有的元素对象挪用. 它接收一个或多个[空格支解]className值(递次无关), 返回婚配的NodeList对象(它返回的是子女元素).

var items = document.getElementsByClassName('item'); // 猎取文档中一切className为'item'的元素
var doms = document.getElementsByClassName('a b'); // 猎取文档中一切同时具有className为a和b的元素

var users = document.getElementById('list').getElementsByClassName('user'); // 猎取文档中id为list的元素下一切className为user的元素

运用getElementsByClassName()不在局限于运用id或许标署名的体式格局猎取元素. 但注重它返回的是NodeList对象, 一个只读情势的类数组对象. 在运用历程须要防止直接对NodeList举行操纵.

注重: 在”奇异形式中”getElementsByClassName()要领在婚配className时不辨别大小写.

因为IE9之前的版本并不支撑这个要领, 因此须要基于现有的手艺模仿完成. 下面供应一个<<JavaScript设想形式>>作者完成的版本:

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null ){
        node = document;
    }
    if ( tag == null ){
        tag = '*';
    }

    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');

    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
                j++;
        }
    }

    return classElements;

}

扩大浏览: document.getElementsByClassName抱负完成

querySelector()要领
W3C范例的Selector API Level1中供应了两个中心的要领querySelector()和querySelectorAll(), 能够经由历程Document对象或许基于现有的元素, 以及在文档片断(DocumentFragment)中挪用这两个要领猎取婚配的元素.

querySelector()要领接收一个CSS选择符字符串, 返回与这个选择符形式婚配的第一个元素. 假如没有婚配则返回null.

var body = document.querySelector('body'); // 猎取body元素
var firstLi = document.querySelector('#list li:first-child'); // 猎取id为list的元素中第一个li元素

var dom = document.getElementById('id');
var lastLi = dom.querySelector('li:last-child');
// 猎取文档中id为id的元素下末了一个li元素, 经由历程现有的元素挪用querySelector要领猎取

注重:

范例中并没有划定请求querySelector()支撑CSS3选择器

querySelector()要领并不能应用于相似:first-line/:visited等婚配文本节点的伪元素或许婚配元素状况的伪类中.

兼容性:

Chrome FireFox Safari Opera IE
1 3.5 3.2 10 8

    原文作者：GongChao
    原文地址: https://segmentfault.com/a/1190000000453658
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞