dom基础2

r囧r小猫 2022-01-20 14:25 221阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>DOM</title>
    </head>
    <body>
    	<div id="d1">Hello DOM</div>
    	<div>hello js</div>
    	<div>hello dom</div>
    
    	<h1 class="d">hello js</h1>
    	<h2 class="d">hello dom</h2>
    	<script type="text/javascript">
    		function p(s){ 
    			document.write(s);
    			document.write("<br>");
    			document.write("<br>");
    		}
    		//通过id获取节点
    		var div1 = document.getElementById('d1');
    		p(div1);//[object HTMLDivElement]
    
    		//通过tageName获取节点,得到一个数组
    		var divs = document.getElementsByTagName('div');
    		for(i=0; i<divs.length;i++){ 
    			p(divs[i]);
    		}
    
    		//通过className获取节点，得到一个数组
    		var elements = document.getElementsByClassName('d');
    		for(i=0;i<elements.length;i++){ 
    			p(elements[i]);
    		}
    	</script>	
    
    	用户名：<input name="user" /><br>
    	密码：<input type="text" name="password"><br>
    	<script type="text/javascript">
    		//通过input中name属性获得节点。注意js是解释语言，是顺序执行的
    		var elems = document.getElementsByName("user");
    		for(i = 0; i < elems.length; i++){ 
    			p(elems[i]);
    		}
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM基础

DOM查找 -------------------- JavaScript DOM基础 DOM是Document Object Model（文档对象模型）的缩写

Myth丶恋晨/ 2023年07月17日 14:02/ 0 赞/ 32 阅读

相关【知识体系】JavaScript基础（2）——DOM

js分三个部分： ECMAScript标准：Js的基本的语法 DOM：Document Object Model——文档对象模型——操作页面元素 BOM

爱被打了一巴掌/ 2023年03月04日 06:40/ 0 赞/ 26 阅读

相关 DOM2

1getElementsByClassName doucment.getElementsByClassName(); IE9以下不兼容 2 封装addClas

曾经终败给现在/ 2022年07月15日 11:53/ 0 赞/ 106 阅读

相关 Jquery——Day2（基础DOM和css操作）

`` ` DOM(Document Object Model)，意思就是文档对象模型。` ` 一般而言，DOM操作分为3个方面，即DOM-CORE(核心

客官°小女子只卖身不卖艺/ 2022年07月12日 12:06/ 0 赞/ 203 阅读

相关 dom基础8

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

素颜马尾好姑娘i/ 2022年05月01日 12:12/ 0 赞/ 185 阅读

相关 DOM-------2

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight\_karl/article/details/60966448

心已赠人/ 2022年02月14日 14:21/ 0 赞/ 172 阅读

相关 dom基础4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

约定不等于承诺〃/ 2022年01月20日 14:47/ 0 赞/ 216 阅读

相关 dom基础2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

r囧r小猫/ 2022年01月20日 14:25/ 0 赞/ 222 阅读

相关 dom基础1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

矫情吗；*/ 2022年01月20日 14:05/ 0 赞/ 207 阅读

相关 dom基础5

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

傷城~/ 2022年01月19日 01:11/ 0 赞/ 250 阅读