首页 > 代码库 > DOM学习笔记二
DOM学习笔记二
DOM中document:代表html的文档对象(重要)
document演示:
该对象的作用,是对可标记型文档进行操作
常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节点,就必须先获取节点所属的文档对象document
获取节点的方法体现:
getElementById();提高标签的id属性值获取该标签节点,返回该标签节点
getElementsByName();通过标签的name属性获取节点,返回的是一个数组/容器
getElementsTagName();通过标签名获取节点,因为标签名会有重复,所以返回一个数组
所以,凡是带s的返回的都是一个数组
1.document获取节点byid:(有id的标签)
<body> <script type="text/javascript" src=http://www.mamicode.com/"out.js"></script>>2.document获取节点byname:(没id,但有name的标签)
通常文本框中的值是不用写的,因为是用户输入<script type="text/javascript"> function getNodeNameDemo(){ var Node = document.getElementsByName("user");//注意是Elements,所以是一组 /* //alert(Node);//undefined //alert(Node.length); 1 //alert(Node); alert(Node[0].nodeName); alert(Node[0].type); alert(Node[0].value); //第二种*/ for(var i = 0;i<document.getElementsByName("user").length;i++) { var userNode = document.getElementsByName("user")[i]; alert(userNode.nodeName); } } </script> <input type="button" value=http://www.mamicode.com/"document对象获取节点" onclick="getNodeNameDemo()"/>>
3。document获取节点byTagname:(没有id,也没有name的标签)
function getNodeByTagNameDemo(){ //直接用标签名获取 var nodes = document.getElementsByTagName("a"); // alert(nodes.length);//2 //alert(nodes[0].innerHTML);//获取内部文本,百度1 for(var i = 0;i<nodes.length;i++){ alert(nodes[i].innerHTML); // nodes[i].target="_blank";给每个标签的属性设置一个值,有N多个超链接标签时,这招就很实用 } } </script> <input type="button" value=http://www.mamicode.com/"document对象获取节点" onclick="getNodeByTagNameDemo()"/>>
第二种<script type="text/javascript"> function getNodeByTagNameDemo2(){ //对于页面中的超链接,百度链接,在当前窗口打开,163链接在新窗口打开 //document获取超链接,可以获取页面中所有超链接节点 //如果需要获取其中某一部分节点,那么就要获取这一部分节点的所属 //在通过这个节点获取其中的所以超链接节点 //获取div节点 var divNode = document.getElementById("newlink"); //div中有方法,getElementsByTagName,注意凡是容器型标签,其中都有这个方法,但是不一定有 // byid,byname,但是一定有标签名 //因为容器型标签中可以装标签 var nodes = divNode.getElementsByTagName("a"); // alert(nodes.length); for(var i = 0;i<nodes.length;i++){ // alert(nodes[i].innerHTML); nodes[i].target="_blank"; } } </script> <input type="button" value=http://www.mamicode.com/"document对象获取节点" onclick="getNodeByTagNameDemo2()"/>>DOM学习笔记二
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。