HTML DOM-->节点常用的属性

1.节点共有的属性

　　nodeName、nodeType、nodeValue

　　举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button id="in" style="background-color: red;">更新</button>
        <input  type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var jsDiv = document.getElementById('in')
            console.log('属性节点：',jsDiv)
            console.log('nodeName:',jsDiv.nodeName)
            console.log('nodeType:',jsDiv.nodeType)
            console.log('nodeValue:',jsDiv.nodeValue)
        </script>
    </body>
</html>

　　输出：

 

 2.节点层次关系属性

　　1>获取当前元素节点的所有的子节点

var childNodesArray = jsDiv.childNodes;
console.log(childNodesArray);

　　2>获取当前元素节点的第一个子节点

var firstchildNode = jsDiv.firstchild;
console.log(firstchildNode);

　　3>获取当前元素节点的最后一个子节点

var lastchildNode = jsDiv.lastchild; 
console.log(lastchildNode);

　　4>获取该节点的文档的根节点，相当于document

var rootNode = jsDiv.ownerDocument; 
console.log(rootNode);

　　5>获取当前节点的父节点

var parentNode = jsDiv.parentNode; 
console.log(parentNode);

　　6>获取当前节点的前一个同级节点

var previousNode = jsDiv.previousSibling; 
console.log(previousNode);

　　7>获取当前节点的后一个同级节点

var nextNode = jsDiv.nextSibling; 
console.log(nextNode);

　　8>获取当前节点的所有的属性节点

var jsInput = document.getElementById("put");
var allAttributesArry = jsInput.attributes; 
console.log(allAttributesArray);
posted @ 2020-04-21 22:01  abner_pan  阅读(282)  评论(0)  编辑  收藏  举报