第一种方法：

demo.html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>项目前端</title>

<script type="text/javascript" src = "base.js"></script>

<script type="text/javascript" src = "demo.js"></script>

</head>

<body>

    <div id = "box">id</div>

    <input type = "radio" name="sex" value="男" checked="checked"/>

    <p>段落</p>

</body>

</html>
demo.js：代码如下
window.onload = function(){

    alert(document.getElementById("box").innerHTML);//弹出id

    alert(document.getElementsByName("sex")[0].value);//弹出男

    alert(document.getElementsByTagName("p")[0].innerHTML);//弹出段落

}

第二种方法：函数式写法

//base.js代码如下：
function $(id){

	return document.getElementById(id);

}

　　

//demo.js代码如下

window.onload=function(){

	alert($("box").innerHTML);

}

　　也能实现同样的效果

第三种方法：对象方法来封装实现获取节点的方法（推荐此种方法）

//base.js用对象来封装代码：

var Base = {

	getId:function(id){

		return document.getElementById(id);

	},

	getName:function(name){

		return document.getElementsByName(name);

	},

	getTagName:function(tag){

		return document.getElementsByTagName(tag);

	}

};　　
//demo.js调用封装的方法

window.onload = function(){

    alert(Base.getId("box").innerHTML);

    alert(Base.getName("sex")[0].value);

    alert(Base.getTagName("p")[0].innerHTML);

}

js项目第一课：获取节点的方法有三个的更多相关文章

  1. JS DOM用不同方法获取节点及对节点插入、复制和移除

    操作节点的方法 appendChild() insertBefore() replaceChild() cloneNode() normalize() splitText() sppendChild( ...

  2. TreeView中右击直接获取节点的方法

    在TreeView中无法直接右击得到一个节点,因为当你选中其中一个右击时(不能是第一个)他会默认跳到第一个. 有时我们要想直接右击得到选中的节点,又时我们又想选中直接右击跳出一个快捷菜单怎么办了! 在 ...

  3. 潭州课堂25班：Ph201805201 django 项目 第一课 (课堂笔记)

    一.Django 现状   1.Django开发前景   1.1 老师做过的项目   ​ 项目图展示:     1.2 Django的厉害之处 在python中,与web开发环境相关的包有13045个 ...

  4. 原生态js获取节点的方法

    <input value="我是用id来获取值的" type="button" onclick="GetById()"/> &l ...

  5. [妙味JS基础]第一课：属性操作、图片切换、短信发送模拟

    知识点总结 HTML的属性操作:读.写 元素.属性名 => “读” 元素.属性名＝新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' = ...

  6. js函数arguments与获取css样式方法

    函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...

  7. JS学习第一课

    1.js 按照编写顺序执行 2.输出使用document.write. 3.申明数组 var array = [1,2,3,5] ;  var arrStr = ["sgsg",& ...

  8. 作品第一课----获取批量checkbox选中的值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 潭州课堂25班：Ph201805201 tornado 项目 第一课 项目介绍和创建 （课堂笔记）

    tornado 相关说明 , 查找 python3 的路径: binbin@abc:~$ which python3/usr/bin/python3 创建虚拟环境 : 创建工程; 用 pycharm ...

随机推荐

  1. 牛客网 暑期ACM多校训练营（第二场）I.car-规律思维题

    I.car 车只能从一边走到另一边,而且车和车不能相撞,车也不能走到坑里.所以直接找规律,如果没有坑,最多能放多少辆车.就会发现,关于对角线对称的两边只能放一辆车,如果是奇数个的时候,中间的行和中间的 ...

  2. (1) C语言 基础1

     VS  scanf 安全错误 在预处理器定义那里添加一行_CRT_SECURE_NO_DEPRECATE vs编译头错误 一.打印helloworld #include<stdio.h> ...

  3. 解密Java内存溢出之持久代

    垃圾回收是Java程序员了解最少的一部分.他们认为Java虚拟机接管了垃圾回收,因此没必要去担心内存的申请,分配等问题.但是随着应用越来越复杂,垃圾回收也越来越复杂,一旦垃圾回收变的复杂,应用的性能将 ...

  4. luogu P1774 最接近神的人_NOI导刊2010提高（02）

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  5. luogu P2828 Switching on the Lights（开关灯）

    题目背景 来源:usaco-2015-dec Farm John 最近新建了一批巨大的牛棚.这些牛棚构成了一个N*N的矩形网络.(1<n<100) 然而bessie十分怕黑,他想计算可以把 ...

  6. luogu P1494 岳麓山上打水

    题目描述 今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. 信息组有一个容量为q升的大缸,由于 ...

  7. POJ3345 Bribing FIPA（树形DP）

    题意:有n个国家,贿赂它们都需要一定的代价,一个国家被贿赂了从属这个国家的国家也相当于被贿赂了,问贿赂至少k个国家的最少代价. 这些国家的从属关系形成一个森林,加个超级根连接,就是一棵树了,考虑用DP ...

  8. Listener监听器笔记1

    1.常用的Web事件监听器接口: 1.ServletContextListener:用于监听Web应用的启动和关闭. 2.ServletContextAttributeListener:用于监听Ser ...

  9. 转：[Asp.net]常见数据导入Excel，Excel数据导入数据库解决方案，总有一款适合你！

    引言 项目中常用到将数据导入Excel,将Excel中的数据导入数据库的功能,曾经也查找过相关的内容,将曾经用过的方案总结一下. 方案一 NPOI NPOI 是 POI 项目的 .NET 版本.POI ...

  10. HTML 中的 dl(dt,dd)、ul(li)、ol(li)

    HTML <dl> 标签 #定义和用法 <dl> 标签定义了定义列表(definition list). <dl> 标签用于结合 <dt> (定义列表中 ...