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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34664239/article/details/85321389

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

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

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;
    }
}
//获取当前元素中的最后一个子元素同上
//获取当前元素的前一个元素
//获取当前元素的后一个元素
//能力检测获取兄弟元素标签数组