第一种方法:

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. HDU 1171.Big Event in HDU-动态规划0-1背包

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. HDU 6038.Function-数学+思维 (2017 Multi-University Training Contest - Team 1 1006)

    学长讲座讲过的,代码也讲过了,然而,当时上课没来听,听代码的时候也一脸o((⊙﹏⊙))o 我的妈呀,语文不好是硬伤,看题意看了好久好久好久(死一死)... 数学+思维题,代码懂了,也能写出来,但是还是 ...

  3. (32)C#文件读写

    一.File 类 这是一个静态类,提供用于创建.复制.删除.移动和打开单一文件的静态方法,并协助创建 FileStream 对象 using System.IO; 没有构造函数和属性  写入数据 1. ...

  4. 用fiddler测试移动端翻页

    大家在移动端是怎么测试翻页的,肯定都是下拉或上滑吧,我也是这样测试的 但如果你要验证数据是否与pc端数据一致时,可能是第一页,第二页看看,或最后几页数据看看,在pc端看简单,直接点击最后一页就行,在移 ...

  5. 树链剖分【p4315】月下"毛景树"

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里. 爬啊爬~爬啊爬毛毛虫爬到了一颗小小的" ...

  6. 编码/解码和进制转化工具hURL

    编码/解码和进制转化工具hURL   在安全应用中,各种编码方式被广泛应用,如URL编码.HTML编码.BASE64等.而在数据分析时候,各种进制的转化也尤为频繁.为了方便解决这类问题,Kali Li ...

  7. 程设刷题 | 程序设计实践II-2017(部分)

    目录 1165-算术题 题目描述 代码实现 1184-Tourist 1 题目描述 代码实现 1186-Tourist 2 题目描述 代码实现 1224-LOVE 题目描述 代码实现 1256-湘潭大 ...

  8. [读书笔记] CSS揭秘-背景与边框

    半透明边框 默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip属性调整该默认行为. border: 10px solid rgba(0,0,0,.2) backgrou ...

  9. MySQL 三节点企业版

    https://promotion.aliyun.com/ntms/act/rds/mysqlenterprise.html

  10. delphi 浮点数转换成十六进制字符串的方法

    我们在研究封包技术时,经常会碰到将浮点数转换成十六进制形式.比如在游戏中人物的座标,经常就用浮点数来表示.怎么将浮点数转换成十六进制字符串形式呢?下面我将写出其在DELPHI中的方法.       先 ...