DOM中常用的属性

来源：互联网发布：网络攻击鱼叉水坑编辑：程序博客网时间：2024/05/17 07:36

DOM中常用的属性

1.innerHTML

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <a id="link" href="http://www.baidu.com">百度</a>    <script type="text/javascript">        var node = document.getElementById('link');        console.log(node.innerHTML);   // 百度    </script></body></html>

（2）value

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <input id="name" type="text" name="" placeholder="请输入用户名">    <script type="text/javascript">        window.onload = function () {            var userName = document.getElementById('name');            userName.onchange = function () {                console.log(userName.value);            }        };    </script></body></html>

这里写图片描述

（3）parentNode

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <div>        <li><a href="#">hello</a></li>        <li><a href="#">world</a></li>    </div>    <script type="text/javascript">        window.onload = function () {            var item = document.getElementsByTagName('li')[0];            console.log(item.parentNode);        };    </script></body></html>

这里写图片描述

（4）childNode

（5）nodeName

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <div id="parent">        <li id="item"><a id="link" href="#">hello</a></li>        <li id="item"><a id="link" href="#">world</a></li>    </div>    <script type="text/javascript">        window.onload = function () {            var divDom = document.getElementById('parent');            var liDom = document.getElementById('item');            var aDom = document.getElementById('link');            console.log(divDom.nodeName);  // DIV            console.log(liDom.nodeName);   // LI            console.log(aDom.nodeName);    // A        };    </script></body></html>

（6）nodeValue

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <div id="parent">        <li id="item"><a id="link" href="#">hello</a></li>        <li id="item"><a id="link" href="#">world</a></li>    </div>    <script type="text/javascript">        window.onload = function () {            var divDom = document.getElementById('parent');            var liDom = document.getElementById('item');            var aDom = document.getElementById('link');            console.log(divDom.nodeValue);  // null            console.log(liDom.nodeValue);   // null            console.log(aDom.nodeValue);    // null        };    </script></body></html>

nodeType

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body>    <div id="parent">        <li id="item"><a id="link" href="#">hello</a></li>        <li id="item"><a id="link" href="#">world</a></li>    </div>    <script type="text/javascript">        window.onload = function () {            var divDom = document.getElementById('parent');            var liDom = document.getElementById('item');            var aDom = document.getElementById('link');            console.log(divDom.nodeType);   // 1            console.log(liDom.nodeType);    // 1            console.log(aDom.nodeType);     // 1        };    </script></body></html>

（完）

阅读全文

0 0