原生js获取节点及元素的兼容写法前端基础

最新推荐文章于 2022-07-15 17:42:37 发布

原创最新推荐文章于 2022-07-15 17:42:37 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#获取节点及元素的兼容写法

js 专栏收录该内容

68 篇文章

订阅专栏

本文深入讲解前端基础操作，包括阻止事件默认行为与冒泡、原生JS获取元素、表单元素属性设置、自定义属性增删查、节点与标签元素属性获取及能力检测等关键技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期复习了下前端基础，写此文章以备用~~

取消默认点击事件，去除冒泡

e.preventDefault();
e.stopPropagation();
IE去除冒泡：window.event.cancelBubble = true;

原生js获取元素：

document.getElementById(‘idName’);
document.getElementTagName(‘tagName’)[0];
document.getElementClassName(‘className’)[0];
当然了，H5还出了两个获取元素的方法：(IE8以下不支持)
document.querySelector();
document.querySelectorAll();

表单元素的属性
type、value、checked、selected、disabled

设置表单元素是否可用：
document.getElementById(“txt”).disabled=true;
设置selet下拉选框项是否选中(id是option的id)
document.getElementById(“e”).selected=true;

innerHtml/innerText/textContent

innerHtml获取里面所有的内容(包括标签)
innerText/textContent只获取标签里所包含的所有文字内容
textContent不支持IE8及以下版本

//能力检测获取innerText
function getInnerText(element) {
	return element.textContent?element.textContent:element.innerText;
}
//能力检测设置innerText
function setInnerText(element,content) {
	if(element.innerText){
	    element.innerText=content;
    }else{
        element.textContent=content;
    }
}

自定义属性

setAttribute
getAttribute
removeAttribute

节点属性

parentNode
childNode
previousSibling
nextSibling
firstChild
lastChild

标签元素属性(除了children，其他属性IE8及以下不支持)

parentElement(与获取父节点获取到的值一样)
children
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild

能力检测获取元素

//获取当前元素中的第一个子元素
function getFirstElement(element) {
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        var node = element.firstChild;
        while(node && node.nodeType!=1){
            node = node.nextSibling;
        }
        return node;
    }
}
//获取当前元素中的最后一个子元素同上
//获取当前元素的前一个元素
//获取当前元素的后一个元素
//能力检测获取兄弟元素标签数组