第一种方法：

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. 华农oj Problem J: 幻化【贪心/抽屉原理】

    Problem J: 幻化 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 18 Solved: 3 [Submit][Status][Web Board ...

  2. Python的工具包[2] -> matplotlib图像绘制 -> matplotlib 库及使用总结

    matplotlib图像绘制 / matplotlib image description  目录 关于matplotlib matplotlib库 补充内容 Figure和AxesSubplot的生 ...

  3. 干净卸载mysql

    一.在控制面板中卸载mysql软件 二.卸载过后删除C:\Program Files (x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了 三.windows+R运行“regedit ...

  4. Xamarin.Android真机测试提示[INSTALL_FAILED_UPDATE_INCOMPATIBLE]

    Xamarin.Android真机测试提示[INSTALL_FAILED_UPDATE_INCOMPATIBLE]   使用真机测试的时候,出现以下错误提示:   Deployment failed ...

  5. php的一些语法

    命名空间: 一个类为App/Http/Controllers/Controller,则该类的命名空间为App/Http/Controllers,可以通过use关键字导入该类,也可以导入命名空间,但是该 ...

  6. IntelliJ IDEA插件-翻译插件

    说明:这个翻译插件应该是最好的了. 官网:https://github.com/YiiGuxing/TranslationPlugin 但是这个有个缺点就是使用收费的API,基于有道,截止今天使用的是 ...

  7. JavaScrip book

     1.<JavaScript: The Good Parts>中文版:<JavaScript语言精粹>2.<Professional JavaScript for Web ...

  8. 解决413 Request Entity Too Large

    修改nginx配置    这是最简单的一个做法,着报错原因是nginx不允许上传配置过大的文件,那么件把nginx的上传大小配置调高就好. 1.打开nginx主配置文件nginx.conf,一般在/u ...

  9. ElasticSearch 检索文档

    1.检索文档 现在Elasticsearch中已经存储了一些数据,我们可以根据业务需求开始工作了.第一个需求是能够检索单个员工的信息. 这对于Elasticsearch来说非常简单.我们只要执行HTT ...

  10. 【Hive】Hive 基础

    Hive架构: Hive基础 1 概念 1.1 简介 1.1.1 hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表, 并提供简单的sql查询功能,可以将sql语句 ...