document节点对象的获取方式

╰半夏微凉° 2022-09-19 12:06 163阅读 0赞

<html>
    	<head>
    		<title></title>
    		<script>
    		
    		/*
    			document节点对象的获取方式：
    			
    		*/
    		//第一种，通过id获取
    		function documentDemo(){
    			var tableNode = document.getElementById("tab_id");
    			tableNode.style.border = "5px solid #00ff00";
    		}
    		//第二种，通过name属性
    		function documentDemo2(){
    			var inputNode = document.getElementsByName("txt");
    			alert(inputNode.length);
    			alert(inputNode[0].value);
    			
    		}
    		//第三种，通过标签名
    		function documentDemo3(){
    			var tdNode = document.getElementsByTagName("td");
    			alert(tdNode.length);
    			for(var x = 0 ; x < tdNode.length;x++){
    				alert(tdNode[x].innerText);
    			}
    		}
    		</script>
    
    		<style type="text/css">
    			.onediv{
    				width:200px;
    				height:100px;
    				border:1px solid #f00;
    				margin-top:20px;
    			}
    			
    			table ,td{
    				border:1px solid #00f;
    				width:200px;
    				margin-top:20px;
    				text-align:center;
    			}
    		</style>
    		
    	</head>
    	
    	<body>
    		<input type="button" value="document对象演示" οnclick="documentDemo3()"><br/>
    		<div class="onediv">
    		这是div中的内容
    		</div>
    		
    		<input type="txt" name="txt" >
    		<input type="txt" name="txt" >
    		
    		
    		<table cellspacing="0" id="tab_id">
    			<tr>
    				<td>java</td>
    				<td>php</td>
    			</tr>
    			<tr>
    				<td>.net</td>
    				<td>ios</td>
    			</tr>
    		</table>
    		
    		<span>这是一个span区域</span> <br/>
    		<a href="#">这是一个超链接</a>
    	<body>
    	
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 JS获取DOM节点的N种方式

** 目录** > 1 document.getElementById() > > 2 document.getElementsByClassName(); > ...

梦里梦外;/ 2024年04月18日 11:06/ 0 赞/ 55 阅读

相关 document节点对象的获取方式

<html> <head> <title></title> <script> / docume

╰半夏微凉°/ 2022年09月19日 12:06/ 0 赞/ 164 阅读

相关 document获取对象三方法

Document对象中有几个常用的方法，我们在[Dom简介][Dom]中提到过。说到获取javascript对象的方法，最常用的可能就是getEleme

叁歲伎倆/ 2022年08月07日 02:40/ 0 赞/ 197 阅读

相关 document.forms对象

document.forms，返回一个集合，包含页面所有form元素 <!doctype html> <html lang="

我会带着你远行/ 2022年06月07日 23:39/ 0 赞/ 193 阅读

相关文档节点document的理解

对于文档节点document的理解文档节点，document，隶属于表示浏览器的window对象，表示网页页面，又称为根节点 1、特征三个node属性---nodeT

缺乏、安全感/ 2022年05月29日 11:17/ 0 赞/ 178 阅读

相关 document对象练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

喜欢ヅ旅行/ 2022年05月14日 01:12/ 0 赞/ 191 阅读

相关 document对象

一 document对象概述文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此wi

向右看齐/ 2022年05月12日 00:08/ 0 赞/ 263 阅读

相关如何获取document对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

桃扇骨/ 2022年02月02日 05:51/ 0 赞/ 300 阅读

相关 Java获取Class对象的方式和实例化对象的方式

Java获取Class对象的方式和实例化对象的方式获取Class对象的方式 User类 1、 Class clazz1 = User.cl

布满荆棘的人生/ 2022年01月19日 05:17/ 0 赞/ 326 阅读

相关 jquery 获取frame document 对象

1 子 iframe 获取父窗口下的其他子 iframe var jqFrame = $(parent.frames[id].content

- 日理万妓/ 2021年12月05日 14:27/ 0 赞/ 380 阅读