JavaScript 获取DOM元素

技术教程gslnedu2025-06-30 18:00:392A⁺A^-

实例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>

点击这里复制本文地址以上内容由朽木教程网整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

html引入js

上一篇：JavaScript面向对象的幕后英雄，没有原型链你写不出真正的好代码

JavaScript 获取DOM元素

相关文章