
这个问题还是要在具体的实例中,解决会比较简单一点那我简单列举两种情况下获取页面元素的id和name的方法吧
1事件中
每一个事件方法中都会带一个event事件的属性参数,这个参数中就包含一个targe属性名,值表示的就是触发事件的节点,那我们可以这样获取
2非事件中
在非事件方法中,你想获取页面元素的id和name,那你首先就需要找到对应的节点你可以用document对象找,当然还是建议用jquery
节点获取了,那获取属性的方法还是跟上面的方法是一样的
在这里我们可以看出来,使用jquery方式更加简洁方便重要的是码字少呀还是建议用一下jquery而且jquery对于浏览器兼容也做了部分优化
1、新建一个html文件,命名为testhtml,用于讲解JS如何获取指定DIV下的子元素LI的值。
2、在testhtml文件内,在div标签内,使用ul、li标签创建两个项目列表,li元素的值分别为项目一、项目二。
3、在testhtml文件内,设置div标签的id为mydiv,主要用于下面通过该id获得mydiv对象。
4、在testhtml文件内,使用button标签创建一个按钮,按钮名称为“获取LI的值”。
5、在testhtml文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getli
6、通过获得li对象,使用each()方法遍历每一个li对象,通过text()方法获得li的值,使用push()方法将获得li值存进数组中。最后,使用alert()方法将所有li值输出。
7、在浏览器打开testhtml文件,点击按钮,查看结果。
可以直接用name这个属性取到的name的值。下面是个小例子。仅供参考:
<body>
<div id="div" name="div" style="width:100px; height:100px; background:#ccc;"></div>
</body>
<script>
var oDiv = documentgetElmentById('div');
oDivonclick=function(){
alert(oDivname); //这个时候填出 div
};
</script>
因为在网页的加载过程中是从上往上慢慢加载的(一般你打开网页可以看到页面加载时和文字的显示都从上往下慢慢显示的),因此当加载到你的JS代码时,此时JS去找pre标签,而此时pre标签还未加载,所以不可能找到,但是如果你这段JS放在pre标签的后面就会显示正常。
解决办法有三种:
1、同一楼所说的,在body标签中加入 onload=函数名,该函数名对应的函数体就是你这段JS代码。
2、对<script language="javascript" type="text/javascript">稍作修改,:<script language="javascript" type="text/javascript" defer="true">加入defer标签,意味着这段JS代码延迟加载。
3、可以使用jQuery库,
<script language="javascript" type="text/javascript">
$(function(){
你的JS代码
})
</script>
js获取元素方法有:
1、getElementById :根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。
2、getElementsByName:getElementsByName(name)该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所以getElementsByName() 方法返回的是所有匹配元素组成的数组,而不是一个元素。
3、getElementsByTagName:getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素
如果把特殊字符串 "" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
以上就是关于JavaScript:怎么获得页面元素的id和name值全部的内容,包括:JavaScript:怎么获得页面元素的id和name值、JS如何获取指定DIV下的子元素LI值、javascript怎么获得元素的name属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)