黑马程序员_DOM获取节点

最新推荐文章于 2022-09-21 12:48:58 发布

吃死鱼的猫

最新推荐文章于 2022-09-21 12:48:58 发布

阅读量584

点赞数

分类专栏：学习笔记文章标签：黑马程序员 dom

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/u011609764/article/details/10297169

版权

学习笔记专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作DOM，包括getElementById、getElementsByName和getElementsByTagName等方法的应用，并提供了实例演示。

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

---------------------- <a href="http://edu.youkuaiyun.com"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.youkuaiyun.com"target="blank">.Net培训</a>、期待与您交流！ ----------------------

DOM(Document Object Model):文档对象模型,它是将标记型文档及其中的内容(如标记,属性,文本)封装成了对象,这样可以用对象的方法对其进行操作.

节点有3个共同的属性,节点名称(nodeName),节点类型(notdeType)和节点值(nodeValue)获取节点有3中方法,分别是getElementById,getElementsByName,getElementsBytagName.

一.getElementById:标签中的id尽量保证唯一性,只有在大的区域,为了方便于获取和操作,才定义id属性.返回的是一个节点对象,当设置多个相同名字的id时,也只获取第一个.

<script type="text/javascript">

function docdemo(){   //对测试按钮进行描述

var tadNode=document.getElementById("tabid");

/tadNode.border="1";

tadNode.borderColor="yellow";/  //通过名称.属性获取,在不同的浏览器会有不同的效果

tabNode.setAttribute("border",1); //通过方法获取,建议使用

tabNode.setAttribute("borderColor","red");

}

</script>

</head>

<body>

<input type="button" name="button" value="测试按钮"  οnclick="docdemo()"/>



<div >

这是div区域

    </div>



<table id="tabid">   

<tr>

     <td>单元格一</td>

        <td>单元格二</td>

    </tr>

    <tr>

     <td>单元格三</td>

        <td>单元格四</td>

    </tr>

</table>

二.getElementsByName:name属性只存在于表单里的组件,name属性很容易重复,因此它的返回值是一个节点数组.可先获取长度,通过数组的方式获取节点的属性.这样便可以对用户输入的数据进行操作.

<script type="text/javascript">

function docdemo(){   //对测试按钮进行描述

var Nodes=document.getElementsByName("sex");  //通过name获取

for(var x=0;x< tadNode.length;x++){  //

alert(tadNode[x].value);  //遍历数组,获取name中的所有值

}

}

</script>

</head>

<body>

用户名:<input type="text" name="user"  />

性别:<input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="woman" />女

<input type="button" name="button" value="测试按钮"  οnclick="docdemo()"/>

三,getElementsBytagName,通过标签名字获取节点对象,标签易重复,因此它返回的也是一个节点数组.

<script type="text/javascript">

function docdemo(){   //对测试按钮进行描述

var divNodes=document.getElementsByTagName("div")[0];

alert(divNodes.innerText);  //获取标签内封装的文本数据

divNodes.innerText="可以对标签内数据进行更改";   //更改标签内文本

}

</script>

</head>

<body>

<input type="button" name="button" value="测试按钮"  οnclick="docdemo()"/>

<div >

这是div区域

    </div>

注意:获取容器标签用通用方法getElementsBytagName,即标签名.getElementsBytagName.

特殊的Id:在IE中,只要具备了id的属性,就认为id的值代表了节点值,但是火狐不支持此观点,因此不建议用id代表节点对象.

---------------------- <a href="http://edu.youkuaiyun.com"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.youkuaiyun.com"target="blank">.Net培训</a>、期待与您交流！ ----------------------

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。