JavaScript中DOM中节点获取

来源：互联网发布：mac恢复出厂系统版本编辑：程序博客网时间：2024/06/05 20:35

具体操作方法：

document.getElementById(id属性值);

document.getElementsByTagName(tag标签名称);

document.getElementsByName(name属性值);不推荐，有浏览器兼容问题,通常应用在form表单里边。

1、document.getElementById获取属性值

<body>    <h2>获取元素结点</h2>    <input type="text" id="username" value="tom" /> <br/>    <input type="text" id="useremail" value="tom@163.com"> <br/></body></html><script type="text/javascript">    //1、document.getElementById获取属性值    var username = document.getElementById('username');    console.log(username);    var useremail = document.getElementById('useremail');    console.log(useremail);</script>

效果图：

2、document.getElementsByTagName(), tag标签获取属性值

<body>    <h2>获取元素结点</h2>    <input type="text" id="username" value="tom" /> <br/>    <input type="text" id="useremail" value="tom@163.com"> <br/>    <div>today is very good</div></body></html><script type="text/javascript">    //1、document.getElementsByTagName(), tag标签获取属性值    var hh = document.getElementsByTagName('h2');    //通过getElementsByTagName获得的事一个数组（即使只有一个结点，也用数组返回）    console.log(hh[0]);    var input = document.getElementsByTagName('input');    console.log(input);    console.log(input[0]);</script>

效果图：

3、DOM文本结点获取

<body>    <h2>文本结点获取</h2>    <input type="text" id="username" value="tom" /> <br/>    <input type="text" id="useremail" value="tom@163.com"> <br/>    <div>today is very good</div></body></html><script type="text/javascript">    //1、获得div内部的文本结点    var dv = document.getElementsByTagName('div')[0];    //firstChild获得第一个子节点/lastChild获得第二个子节点    console.log(dv.firstChild);    console.log(dv.firstChild.wholeText);   //获得文本信息</script>

效果图：

4、兄弟结点

firstChild、lastChild：父节点获得第一个、最后一个子节点

nextSibling：获得下个兄弟结点

oreviousSibling：获得上个兄弟结点

childNodes：获得所有父节点内部全部子节点信息

以上属性在主流浏览器(火狐firefox、chrome、safari、opera)中会给考虑空白节点。在IE浏览器中不考虑。

<body>    <h2>兄弟结点获取</h2>    <ul>        <li>red</li>        <li>blue</li>        <li>green</li>    </ul></body></html><script type="text/javascript">    //firstChild、lastChild、nextSibling、oreviousSibling、childNodes    var ull = document.getElementsByTagName('ul').item(0);    console.log(ull.childNodes);    console.log(ull.childNodes.length);    console.log('---------------------------------------------------------');    console.log(ull.firstChild);    //在火狐中第一个是空白结点    console.log(ull.firstChild.nextSibling);      //第二个结点才是li结点    console.log('---------------------------------------------------------');    console.log(ull.lastChild);    console.log(ull.lastChild.previousSibling);</script>

效果图：

5、获取父结点

结点：parentNode

<body>    <h2>兄弟结点获取</h2>    <ul>        <li>red</li>        <li>blue</li>        <li>green</li>    </ul></body></html><script type="text/javascript">    var blue = document.getElementsByTagName('li')[1];    console.log(blue);    console.log(blue.parentNode);    console.log(blue.parentNode.parentNode);    console.log(blue.parentNode.parentNode.parentNode);    console.log(blue.parentNode.parentNode.parentNode.parentNode);    console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode);</script>

效果图：

阅读全文

0 0