目录
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
操作:1:成功:503-第二、三、四种获取html元素的方法
操作:2:成功:504对元素的三种操作(设置内容、设置属性、设置css)
一.目的
1.想:学习前端知识
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
2.SIKI学院:我参考此视频实操
- 我参考此视频实操
3.w3school官网:当做字典使用
4.菜鸟教程:当做字典使用
三.注意
操作:1:成功:503-第二、三、四种获取html元素的方法
1.代码:整体
查找 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>