1.2 在HTML中使用JavaScript

在HTML中使用JavaScript有两种方法:直接在页面中嵌入引入外部的JS脚本

直接嵌入和引入都需要用到,这里先介绍一下该标签:

<script></script>标签是双标记,需要成对出现(在XHTML中,可以简写成<script />,但是HTML标准不支持),该标签可以出现在页面的任何位置,该标签的可选参数有6个,废弃的和不常用的不再研究,部分如下:

async:异步脚本,只针对于引入外部脚本,表示立即下载脚本,因为在使用时如果要有多个异步脚本要确保或不依赖,所以一般不推荐使用,也不经常使用,了解就好;

defer:延迟脚本,等文档完全被加载后在下载该脚本,也是只对于外部脚本有效,因为HTML5会忽略,所以不必使用,了解就好;

src**:外部脚本的路径地址,引入脚本必须;

type:使用脚本语言的内容类型(MIME类型),一般为t,也会用text/javascript,在非IE系的浏览器,也可以是application/javascript或application/ecmascript,但是除了text/javascrip都不常用,其在HTML5里面,这一项可以省略,而且推荐省略。

在页面中直接嵌入JavaScript代码,实例如下:

<script>
    //javascripe code
</script>
//如果是HTML5以前一般指定type
<script type="text/javascript">
    //javascripe code
</script>

因为JavaScript是从上往下依次解释的, 所以在嵌入时要考虑到逻辑顺序(例如在获取一个节点的时候不可以在主体加载以前)

引入外部的脚本,实例代码如下:

<script src="xx/xxx.js"></script>

不要在引入的<script></script>标签 之间写脚本代码,会被忽略,且加载外部脚本也是从上向下加载的,要注意逻辑关系。

因为自上往下加载的特性,我们一般将脚本的加载放在主体的最后,以避免加载JS的时候造成HTML无法加载,造成的浏览器长时间空白造成的不良好用户体验(虽然这一点可以用defer延迟脚本实现,但是不推荐):

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

<noscript>元素,指在不支持JavaScript或脚本被禁止的时候,显示,否则,不会显示,现在已经很少使用了,因为目前绝大多数浏览器都默认支持JavaScript,使用如下:

<noscript>
<p>本页面需要浏览器支持(启用) JavaScript。
</noscript>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用JavaScript的document对象的getElementById方法获取input元素的内容。例如: HTML代码: <input type="text" id="myInput"> JavaScript代码: var inputContent = document.getElementById("myInput").value; 其,getElementById方法会返回一个表示指定id的元素的对象,然后使用value属性获取该元素的值,即为input的内容。 ### 回答2: 在JavaScript,获取Input的内容并不复杂。通常我们可以通过以下方式达成目的: 一、使用getElementById方法获取Input的值 该方法通常适用于我们已知Input元素的ID的情况下。具体实现方式如下: 1.1 HTML代码 ``` <input type="text" id="input1" value="JavaScript获取Input的值"> ``` 1.2 JavaScript代码 ```javascript var inputVal = document.getElementById('input1').value; // 输出Input的值 console.log(inputVal); ``` 二、使用getElementByTagName方法获取Input的值 2.1 HTML代码 ```html <input type="text" id="input2" value="JavaScript获取Input的值"> ``` 2.2 JavaScript代码 ```javascript var inputVal = document.getElementsByTagName('input')[0].value; // 输出Input的值 console.log(inputVal); ``` 需要注意的是,getElementsByTagName返回的是一个NodeList对象,因此需要通过索引获取对应元素。 三、使用querySelector方法获取Input的值 3.1 HTML代码 ```html <input type="text" id="input3" value="JavaScript获取Input的值"> ``` 3.2 JavaScript代码 ```javascript var inputVal = document.querySelector('#input3').value; // 输出Input的值 console.log(inputVal); ``` 与getElementById类似,querySelector方法返回匹配的第一个元素。 以上是几种获取Input元素的值的方法,除此之外,还有其他的一些方法可以获取Input的值,如使用jQuery的val()方法等。 每一种方法各有优缺点,具体使用方式需要根据实际情况而定。 ### 回答3: 在JavaScript获取input的内容需要使用DOM(Document Object Model)操作。DOM是一种树形结构,表示文档的结构和内容。通过DOM可以获取和操作HTML文档的元素和属性,包括input元素。 首先,需要获取包含input元素的父元素,可以使用document.getElementById或者document.querySelector方法获取。例如: ``` // 获取id为input-container的元素 var inputContainer = document.getElementById("input-container"); // 或者通过CSS选择器获取 var inputContainer = document.querySelector("#input-container"); ``` 接下来,可以获取input元素本身。在input元素,通过value属性可以获取或设置input的内容。例如: ``` // 获取id为input的元素 var inputElement = inputContainer.querySelector("#input"); // 获取input的内容 var inputContent = inputElement.value; ``` 此时,变量`inputContent`就存储了input的内容,可以进行后续的操作。 如果要获取多个input元素的内容,可以使用document.querySelectorAll方法获取所有满足条件的元素,并遍历获取每个input元素的内容。例如: ``` // 获取所有class为input的元素 var inputElements = inputContainer.querySelectorAll(".input"); // 遍历所有input元素,获取内容 for (var i = 0; i < inputElements.length; i++) { var inputContent = inputElements[i].value; console.log(inputContent); } ``` 以上就是使用JavaScript获取input内容的方法。需要注意的是,获取input元素的方法和属性可能因为HTML结构和属性名而有所不同,需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值