龙空技术网

JavaScript 获取DOM元素

寒笛过霜天 71

前言:

今天小伙伴们对“js获取框架页面dom元素位置”都比较重视,看官们都需要了解一些“js获取框架页面dom元素位置”的相关资讯。那么小编同时在网上收集了一些有关“js获取框架页面dom元素位置””的相关文章,希望看官们能喜欢,姐妹们一起来了解一下吧!

实例1:

<!DOCTYPE html><html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /></head><body><h2>获得元素节点</h2><p><input type="text" id="username" value="tom"></p><p><input type="text" id="useremail" value="tom@163.com"></p></body></html><script type="text/javascript">//② document.getElementsByTagName(tag标签名称)// 该方法会返回一个对象集合(无论对应的节点有几个)var hh = document.getElementsByTagName('h2');console.log(hh);//对象集合 HTMLCollection[h2]//两种方式 可以从对象集合中 获得具体的一个元素节点对象console.log(hh[0]); //<h2>console.log(hh.item(0)); //<h2>var ipt = document.getElementsByTagName('input');console.log(ipt);//HTMLCollection[input#username 属性(attribute)值 = "tom", input#useremail 属性(attribute)值 = "tom@163.com"]console.log(ipt.item(1));</script>

关于节点的获取需待HTML加载完毕后, javascript代码才能执行;

为此可以使用DOM1事件机制、window.onload语句、将javascript语句放在HTML语句最后;

而DOM2事件机制(即事件监听函数)要放在window.onload语句中, 或者放在HTML语句最后;

实例2:

<!DOCTYPE html><html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /></head><body><h2>获得元素节点</h2><form><p><input type="text" id="username" value="tom" name="mingzi"></p><p><input type="text" id="useremail" value="tom@163.com" name="youxiang"></p></form></body></html><script type="text/javascript">//③ document.getElementsByName(name属性值)// 该方法会返回一个对象集合(无论对应的节点有几个)var iut = document.getElementsByName('youxiang');console.log(iut);//NodeList[input#useremail 属性(attribute)值 = "tom@163.com"]//从集合对象获得具体节点对象有两种方式:console.log(iut[0]);//<input id="useremail" type="text" name="youxiang" value="tom@163.com">console.log(iut.item(0));//<input id="useremail" type="text" name="youxiang" value="tom@163.com"></script>

标签: #js获取框架页面dom元素位置 #js获取dom元素的值