<html>
<body> <h1>My First Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script> </body>
</html>

js 查找 HTML 元素

  • 1通过 id 找到 HTML 元素
  • 2通过标签名找到 HTML 元素
  • 3通过类名找到 HTML 元素

1:通过 id 找到 HTML 元素

<html>
<body> <p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p> <script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是:' + x.innerHTML + '</p>');
</script> </body>
</html>

2:通过标签名找到 HTML 元素

<html>
<body> <p>Hello World!</p> <div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div> <script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是:' + y[0].innerHTML);
</script> </body>
</html>

js被引入html网页中的方式:

1html的head和body中的引用:

<html>
<body> <h1>My First Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script> </body>
</html>

2:html外部引用:

<html>
<body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p> <script type="text/javascript" src="/js/myScript.js"></script> </body>
</html>

html base2的更多相关文章

  1. 初等数论-Base-2(扩展欧几里得算法,同余,线性同余方程,(附:裴蜀定理的证明))

    我们接着上面的欧几里得算法说 扩展欧几里得算法 扩展欧几里德算法是用来在已知a, b求解一组x,y,使它们满足贝祖等式\(^①\): ax+by = gcd(a, b) =d(解一定存在,根据数论中的 ...

  2. BASE2(matlab)

    %{ // %} clc % linspace(3,5) 3到5 分成100 default %{ a=1 b=2 str = [num2str(a),'+',num2str(b)] eval(str ...

  3. Python:Base2(List和Tuple类型, 条件判断和循环,Dict和Set类型)

    1.Python创建list: Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: &g ...

  4. javascript arguments(转)

    什么是arguments arguments 是是JavaScript里的一个内置对象,它很古怪,也经常被人所忽视,但实际上是很重要的.所有主要的js函数库都利用了arguments对象.所以agru ...

  5. WPF - 属性系统 (2 of 4)

    属性更改回调 前一章的示例中,对各个参数的设置都非常容易理解.如果我们仅仅需要创建一个独立的依赖项属性,那么上面所提到的创建依赖项属性的基础知识足以满足需求.但是事情往往并非如此完美.在一个系统中,很 ...

  6. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  7. 4种解决json日期格式问题的办法

    4种解决json日期格式问题的办法   开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据,如下 ...

  8. 《UNIX环境高级编程》笔记——2.标准和实现

    随着UNIX各种衍生版本不断发展壮大,标准化工作就十分必要.其实干啥事都是这样,玩的人多了,必须进行标准化. 一.UNIX标准 1.1 ISO C(ANSI C) ANSI:Amerocan Nato ...

  9. Standard C 语言标准函数库介绍

    全面巩固所知所学,往精通方向迈进! Standard C 语言标准函数库速查 (Cheat Sheet) from:http://ganquan.info/standard-c/function/ C ...

随机推荐

  1. 【其他】MySql数据库的安装与卸载

    一.安装 1.首先下载安装包,包含服务端和客户端 2.添加用户组.用户 secondary1:~ # groupadd mysql secondary1:~ # useradd -g mysql -d ...

  2. Swift-HELP

    //获取网页地址对应的字符串 var urlString = url.absoluteURL.absoluteString

  3. 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解

    在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...

  4. java启动子进程以及进程通信

    1.利用进程的管道通信传输流 2.子进程没有控制台,正常测试的时候也是没办法看到子进程的输出的,需要传到主线程 3.测试主进程传参给子进程再传回来 4.父进程启动子进程只要执行runtime.exec ...

  5. IIS:错误: 无法提交配置更改,因为文件已在磁盘上更改

    文件名: \\?\C:\Windows\system32\inetsrv\config\applicationHost.config 错误: 无法提交配置更改,因为文件已在磁盘上更改 通过 Micro ...

  6. leetcode409

    Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...

  7. hdu_2227_Find the nondecreasing subsequences_树状数组,离散化

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2227 题意:给你一个集合,让你求递增子序列有多少个,和树状数组求逆序对差不多,不过数据比较大,要离散化 ...

  8. 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

    编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...

  9. myeclipse复制项目

    一.myEclipse 复制后修改名称,访问不到项目 这是因为,你只是改了项目的名称,而没有改 下面是解决方法: 方法 1.右击你的项目,选择"properties",在" ...

  10. 【Valse首发】CNN的近期进展与实用技巧(上)

    作者:程程链接:https://zhuanlan.zhihu.com/p/21432547来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 深度学习大讲堂致力于推送人工智 ...