程序博客网 > 网络拓扑类型

黑马程序员_DOM获取节点

来源：互联网发布：网络拓扑类型编辑：程序博客网时间：2024/05/02 04:53

---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.csdn.net"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="测试按钮"  onclick="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="测试按钮"  onclick="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="测试按钮"  onclick="docdemo()"/>
<div >
这是div区域
    </div>
注意:获取容器标签用通用方法getElementsBytagName,即标签名.getElementsBytagName.
特殊的Id:在IE中,只要具备了id的属性,就认为id的值代表了节点值,但是火狐不支持此观点,因此不建议用id代表节点对象.
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------

网络拓扑类型

网络拓扑类型

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子中国实际人口名义利率与实际利率实际利率计算公式理论联系实际实际上的英文十月怀胎实际9个月做彩超胎停实际没停实际的近义词实际是什么意思贫困申请书1500切合实际一点 360借条1万12个月实际还多少科学小实验折磨的实验实验小白鼠实验报告实验学校豚鼠实验物理实验霍桑实验双缝实验电解水实验实验小学死亡实验实验楼费城实验实验英文实验吧实验英语实验组专业实验对比实验武神风暴实验小白鼠疯巫妖的实验日志黑道邪皇实验小白鼠课程标准实验教科书双缝实验为什么恐怖实验小白鼠新书示波器实验报告天帝实验小白鼠狂枭实验小白鼠实验报告格式