Web前端第三季(JavaScript):十五:第5章:JavaScript DOM文档对象模型:503第二、三、四种获取html元素的方法+504对元素的三种操作(设置内容、设置属性、设置css)

查找 HTML 元素
1、通过 id 找到 HTML 元素
document.getElementById("idname")
2、通过标签名找到 HTML 元素
document.getElementsByTagName("tagName")（全局搜索，整个网页文档）
tagObj.getElementsByTagName("tagName") 搜索tagObj的子元素（b不包括自身）
3、通过类名找到 HTML 元素
document.getElementsByClassName("className")
ele.getElementsByClassName("className")
4、通过名字查找HTML元素
document.getElementsByName("name")
这里的名字不是指标签的名字，是指的name属性的名字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="one">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
			<span>
				DOM：文档对象模型（Document Object Model）
				简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
				总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
			</span>
		</div>
		<div class="two" name="xzy">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
		</div>
		<div class="two" name="xzy">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
		</div>
		<p>
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
		</p>

	</body>
</html>

<script type="text/javascript">
	// 1.通过id找到元素
	// var div = document.getElementById("one");
	// console.log(div);

	// 2.通过标签名字找到元素
	// var arr_div = document.getElementsByTagName("div");
	// console.log(arr_div);
	// var arr_span = document.getElementsByTagName("span");
	// console.log(arr_span);

	// 3.通过类名找到元素
	// var arr_class = document.getElementsByClassName("two");
	// console.log(arr_class);
	
	// 4.通过标签的name来查找
	var arr1=document.getElementsByName("xzy");
	console.log(arr1);
</script>

1.运行结果:成功:通过id找到元素

<script type="text/javascript">
	// 1.通过id
	var div = document.getElementById("one");
	console.log(div);
</script>

2.运行结果:成功:通过标签名字找到元素

<script type="text/javascript">
	// 2.通过标签名字找到元素
	var arr_div = document.getElementsByTagName("div");
	console.log(arr_div);
	var arr_span = document.getElementsByTagName("span");
	console.log(arr_span);
</script>

3.运行结果:成功:通过类名找到元素

<script type="text/javascript">
	// 3.通过类名找到元素
	var arr_class = document.getElementsByClassName("two");
	console.log(arr_class);
</script>

4.运行结果:成功:通过标签的name来查找

<script type="text/javascript">	
	// 4.通过标签的name来查找
	var arr1=document.getElementsByName("xzy");
	console.log(arr1);
</script>

操作:2:成功:504对元素的三种操作(设置内容、设置属性、设置css)

1.运行结果:成功:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="one">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
			<span>
				DOM：文档对象模型（Document Object Model）
				简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
				总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
			</span>
		</div>
		<div class="two" name="xzy">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
		</div>
		<div class="two" name="xzy">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
			<font size="100" color="antiquewhite" style="font-family: '宋体'" id="myFont">xzy</font>
		</div>
		<p id="three">
			DOM：文档对象模型（Document Object Model）
			简述：网页被加载的时候，浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象，来操作对应的标签的一些属性。
			总结：获取要操作的标签元素对应的对象，通过这个对象来操作这个元素。
		</p>

	</body>
</html>

<script type="text/javascript">
	// 1.获取、设置内容
	// var p = document.getElementById("three");

	//设置文本内容
	// p.innerText = "asd";

	//设置添加标签
	// p.innerHTML = "<font color='red'>xzy</font>";

	// 2.获取、设置属性
	// var myFont = document.getElementById("myFont");
	// myFont.setAttribute("color", "aqua");
	// myFont.setAttribute("style", "font-family: 楷体");

	//3.获取属性值，返回的是字符串
	var myFont = document.getElementById("myFont");
	var size = myFont.size;
	console.log(size);
	console.log(typeof(size));
</script>