document节点对象的获取方式示例介绍

代码如下:

<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对象演示" onclick="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)

相关推荐

  • document节点对象的获取方式示例介绍

    复制代码 代码如下: <html> <head> <title></title> <script> /* document节点对象的获取方式: */ //第一种,通过id获取 function documentDemo(){ var tableNode = document.getElementById("tab_id"); tableNode.style.border = "5px solid #00ff00&qu

  • Vue路由参数的传递与获取方式详细介绍

    Vue路由参数的传递与获取方式详细介绍

    目录 前言 1. 通过动态路由参数传递 2. 通过query字符串传递 3. props 隐式传递 前言 vue 页面路由切换时传参的方式有如下几种: 动态路由参数 它隐藏字段信息,相对于来说较安全,同时地址栏中的地址也相对较短 它必须是先定义后使用,一般用于根据固定参数,返回对应的数据所用 query字符串 ?id=1 通过search字符串的方式来在地址栏中传递数据,相对于来说地址栏会暴露字段信息安全性较低,一般用于搜索相关,它可以不定义就可以直接用 props 隐式传递 隐式传递,它一般用

  • jquery JSON的解析方式示例介绍

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'}, {

  • 取消选中单选框radio的三种方式示例介绍

    本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp

  • js中创建对象的几种方式示例介绍

    JavaScript中的所有事物都是对象:字符串.数组.数值.函数等.JS中并没有类的概念, 但我们可以利用JS的语法特征,以类的思想来创建对象. 原始方法 复制代码 代码如下: <script type="text/javascript"> var obj = new Object(); obj.name = "Koji"; //为对象添加属性 obj.age = 21; obj.showName = function(){ //为对象添加方法 ale

  • JavaScript中for-in遍历方式示例介绍

    摘要:for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,for-in会将继承的属性/方法列出,这一点在使用时需要特别关注. 除了传统的for循环,JavaScript为遍历操作定义了for-in方式,根据数据源的不同,在使用时存在差异. (1)遍历对象: 复制代码 代码如下: var fish = { head : 1, tail : 1, } for(var prop in fish) { console.log(

  • Java Gradle项目中的资源正确获取方式

    引言 一个Java Gradle项目会涉及到资源的访问. 一般情况下会将当前项目所需的资源文件全部放置于resources文件夹下, 无论是main文件下的source code 还是test文件夹下的test code. 都或多或少的涉及到获取resources文件夹下的资源. 本文主要目的就是详细的总结一下如何获取resources文件夹下的资源. 两个getResource方法 来看一个简单的Java Gradle项目(称呼其为simpleresource)的项目结构 首先这个projec

  • JS document对象简单用法完整示例

    JS document对象简单用法完整示例

    本文实例讲述了JS document对象简单用法.分享给大家供大家参考,具体如下: <html> <head> <title>js-document对象学习</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 直接获取对象 function testGetElementById(){ //通过id获取对象 // v

  • jQuery获取单击节点对象的方法

    本文实例讲述了jQuery获取单击节点对象的方法.分享给大家供大家参考,具体如下: event.target属性: <script language="JavaScript" type="text/javascript"> $("document").ready(function () { $(".menu").bind("click", function (event) { var click

  • C#获取本地IP的四种方式示例详解

    1.第一种方式 采用System.Net.Dns的GetHostAddress的方式,具体请看代码: /// <summary> /// 网络不通畅可以获取 /// 不过能获取到具体的IP /// </summary> /// <returns></returns> public static List<IPAddress> GetByGetHostAddresses() { try { IPAddress[] adds = Dns.GetHos

随机推荐