优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript 获取DOM元素

nanyue 2025-01-02 18:08:59 技术文章 4 ℃

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

Tags：

猜你喜欢

最近发表
标签列表