JavaScript获取节点

时间：2024-04-05 07:46:17

目录

JS的document内置对象

可以把HTML中的每个标签看成一个节点，那么可以通过JS将这些节点获取出来，可以使用JS的一个内置对象（对象有自己的属性和方法）取得这些节点并且进行操作（修改，删除，替换其内容），该对象是一个内置对象叫作document，内置对象就是已经创建好的对象，我们可以直接使用。
JavaScript获取节点

根据id值取得元素节点对象

<html>
	<head>
		<meta charset="UTF-8">
		<title>浏览器标题栏</title>
		<!--引用外部样式CSS-->
		<link rel="stylesheet" href="../css/index.css">
		<!--导入外部的js文件-->
	</head>
	<body>
		<div id = "div1">
			<p>
				明天放假！
			</p>
		</div>
	</body>
</html>
<script src="../js/index.js"></script>

//在当前的js文件中调用函数库中的函数
var node = document.getElementById("div1");
console.log(node.innerHTML);

JavaScript获取节点
使用innerHTML可以取得节点对象下的所有HTML代码

根据标签名取得元素节点

<html>
	<head>
		<meta charset="UTF-8">
		<title>浏览器标题栏</title>
		<!--引用外部样式CSS-->
		<link rel="stylesheet" href="../css/index.css">
		<!--导入外部的js文件-->
	</head>
	<body>
		用户名：<input type="text" name="username" value="尼古拉斯"><br>
		电话：<input type="text" name="phone" value="das1234"><br>
		密码：<input type="text" name="username" value="1234"><br>
	</body>
</html>
<script src="../js/index.js"></script>

//根据元素名获取
var inputs=document.getElementsByTagName("input");
console.log("用户名："+inputs[0].value);
console.log("电话："+inputs[1].value);
console.log("密码："+inputs[2].value);
var phone = inputs[1].value;
if(isNaN(phone)){ //判断变量是否是一个数字，如果是数字返回false，否则返回true
	alert("你的电话号码不合法！");
}

JavaScript获取节点

根据节点的name属性获得元素

<body>
	用户名：<input type="text" name="username" value="尼古拉斯"><br>
	电话：<input type="text" name="phone" value="das1234"><br>
	密码：<input type="text" name="password" value="1234"><br>
</body>

//根据元素的name属性获取节点对象
var inputs=document.getElementsByTagName("username");
console.log("名字是："+inputs[0].value);

根据class获取元素节点

<body>
		<p class="newYear">
			<h1>
				新年快乐！
			</h1>
		</p>
		<p class="newYear">
			<h1>
				新年快乐！
			</h1>
		</p>
		<p class="newYear">
			<h1>
				新年快乐！
			</h1>
		</p>
	</body>

//根据元素的name属性获取节点对象
var inputs=document.getElementsByClassName("newYear");
console.log(inputs);

JavaScript获取节点

在文本框中输入两个数，计算和

<body>
		A的值：<input type="text" name="numA">
		B的值：<input type="text" name="numB">
		计算结果：<input type="text" name="numC">
		<button type="button" onclick="addSum()">开始计算</button>
	</body>

//计算两树之和的函数
function addSum(){
	//计算文本框中的值
	var inputs=document.getElementsByTagName("input");
	var numA=inputs[0].value;
	var numB=inputs[1].value;
	//将字符串转换成数字
	var sum=parseInt(numA)+parseInt(numB);
	//将计算的值填写到第三个input中
	inputs[2].value=sum;
}

JavaScript获取节点

相关文章