第一种方法:

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. Codeforces 914D Bash and a Tough Math Puzzle (ZKW线段树)

    题目链接  Round #458 (Div. 1 + Div. 2, combined)  Problem D 题意  给定一个序列,两种询问:单点修改,询问某个区间能否通过改变最多一个数使得该区间的 ...

  2. 又是一年NOIP然鹅我考的是高数(虽然我没打并且内容与NOIP无关)(手动滑稽)

    好长时间没有写过总结了.也是高三结束,自招结束.成功的由国宝变为四害,整个人也是完全放松的,或者说是放肆的. 整个暑假都是游戏睡觉,游戏睡觉,也没有干什么有意义的事.有人说别人都在学习大一课程的时候我 ...

  3. (转)Unity3D协同程序(Coroutine)

    一.什么是协同程序 协同程序,即在主程序运行时同时开启另一段逻辑处理,来协同当前程序的执行.换句话说,开启协同程序就是开启一个线程. 二.协同程序的开启与终止 在Unity3D中,使用MonoBeha ...

  4. @selector和SEL

    遇到selector发现不是很明白,网上搜到的零零星星的介绍也不成体系,索性自己翻译一下,加深一下印象.原文来自官方API文档下的Selectors. Selectors 在OC中,selector有 ...

  5. Linux的五个查找命令:find,locate,whereis,which,type 及其区别

    1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...

  6. 【JPA】JPA的注解@MappedSuperclass作用解释【转】

    [代码参考地址]:GitHub地址 [原文地址][http://blog.sina.com.cn/s/blog_7085382f0100uk4p.html] [这里仅用到第三点为止] ======== ...

  7. Http标准协议Android网络框架——NoHttp

    NoHttp详细文档:http://doc.nohttp.net NoHttp公益测试接口:http://api.nohttp.net 支持与RxJava完美结合.支持一句话切换底层为OkHttp,支 ...

  8. jstl fn:replace替换换行符

    textarea输入换行符后应该是'\n',在div中展示时替换成'<br>' 找到一种方法用jsp标签 jstl fn:replace方法 使用fn:replace方法之前 先要把jst ...

  9. Solr6.6.0 用 SimplePostTool索引文件

    一.背景介绍 Solr启动并运行之后,并不包含任何数据,在solr的安装目录下的bin目录中,有一个post工具,我们可以使用这个工具往solr上传数据,这个工具必须在命令行中执行,post工具是一个 ...

  10. 【Java编码准则】の #13使用散列函数保存password

    明文保存password的程序在非常多方面easy造成password的泄漏.尽管用户输入的password一般时明文形式.可是应用程序必须保证password不是以明文形式存储的. 限制passwo ...