Day6_HTML+CSS+JS——dom标准+document的三个方法

最新推荐文章于 2022-06-15 13:38:36 发布

Android_la

最新推荐文章于 2022-06-15 13:38:36 发布

阅读量192

点赞数

分类专栏： HTML+CSS+JS 文章标签： HTML+CSS+JS

本文链接：https://blog.csdn.net/qq_40634846/article/details/99290224

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一. 储备知识

DOM，（Document Object Model）文档对象模型。DOM定义了访问和处理HTML文档的标准方法。

HTML的作用：

HTML是关于如何获取、修改、添加或删除 HTML元素的标准

HTML DOM标准：

HTML文档中的所有内容都是节点

整个文档都是一个文档节点 document
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

总之记住一句话，HTML页面内，一切皆节点

DOM节点：

节点：Node——构成HTML文档最基本的单元
节点分为五类：

文档节点（Document）：整个HTML文档的相关信息封装后得到的对象
元素节点（Element）：构成HTML文档最基本的元素，对应HTML文档中的HTML标签
文本节点（Text）：HTML标签中的文本内容
属性节点（Attribute）：元素的属性
注释节点（Attribute）：html注释

document的三个方法

getElementById(),其作用是返回指定id的第一个对象的引用。
getElementsByTagName(),其作用是返回指定标签名的一组对象的引用。
getElementsByName(),其作用是返回指定name属性值的一组对象的引用。

二. 例子

每个载入浏览器的HTML文档都会成为Document对象。Document对象允许我们从脚本中对HTML页面中的所有元素进行访问。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
          window.onload = function(){
        	//查找bj节点
        	var btn01Ele = document.getElementById("btn01");  
        	btn01Ele.onclick = function(){
        		 var bjEle = document.getElementById("bj");
        		alert(bjEle.innerHTML);//弹出元素的内部文本 
        	};  
        		
        	//查找所有li节点
        	var btn02Ele = document.getElementById("btn02");
        	btn02Ele.onclick = function(){
        		 var liEles = document.getElementsByTagName("li");
        		 //alert(liEles.length);获取集合的长度
        		 //遍历liEles集合
        		 for(var i = 0; i < liEles.length; i++){
        			 //取出集合中第i个位置的元素并获取元素的内部文本
        			 alert(liEles[i].innerHTML);
        		 }
        	};
        	
        	//查找name=gender的节点
        	var btn03Ele = document.getElementById("btn03");
        	btn03Ele.onclick = function(){
        		var genderEles = document.getElementsByName("gender");
        		for(var i = 0; i < genderEles.length; i++){
        			alert(genderEles[i].value);
        		}
        	};
        	  
          };
</script>
</head>
<body>
       <button id="btn01">btn01</button>
       <button id="btn02">btn02</button>
       <button id="btn03">btn03</button>
       <ul>
            <li id="bj">北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
       </ul>
       性别：男<input type="radio" name="gender" value="男">
                  女<input type="radio" name="gender" value="女">
</body>
</html>