整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

8个javascript获取元素的方法

我们的日常前端开发工作中,经常会用到javascript技术,那么javascript获取元素的方法有哪些,大家都知道吗?目前获取元素属性的方法中最常见的有8个,包括innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val(),让我们分别了解下应用方法吧。

1、innerHTML 属性

在读模式下,innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记。在写模式下,innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点。下面是一个例子:

对于上面的元素来说,它的 innerHTML 属性会返回如下字符串。

2、outerHTML 属性

在读模式下,outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下,outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树完全替换调用元素。下面是一个例子。

如果在元素上调用 outerHTML,会返回与上面相同的代码,包括本身。使用 outerHTML 属性以下面这种方式设置值:

这行代码完成的操作与下面这些 DOM 脚本代码一样:

结果,就是新创建的元素会取代 DOM 树中的元素。

replaceChild() 方法用新节点替换某个子节点。

语法:

3、innerText 属性

通过 innerText 属性可以操作元素中包含的所有文本内容,包括子文档树中的文本。在通过 innerText 读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。在通过 innerText 写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。下面是一个例子:

对于这个例子中的元素而言,其中 innerText 属性会返回下列字符串:

使用 innerText 属性设置这个元素内容,则只需一行代码:

执行这行代码后,页面的 HTML 代码就会变成如下所示:

设置 innerText 属性移除了先前存在的所有子节点,完全改变了 DOM 树。设置 innerText 永远只会生成当前节点的一个子文本节点,而为了确保只生成一个字文本节点,就必须要对文本进行 HTML 编码。利用这一点,可以通过 innerText 属性过滤掉 HTML 标签。方法是将 innerText 设置等于 innerText,这样就可以去掉所有 HTML 标签,比如:

执行这行代码后,就用原来的文本内容替换了容器元素中的所有内容(包括子节点,因而也就去掉了 HTML 标签)。举个栗子:

输出:

4、outerText 属性

除了作用范围扩大到了包含 调用它的节点之外,outerText 与innerText 基本上没有多大区别。在读取文本值时,outerText 与 innerText 的结果完全一样。但在写模式下,outerText 就完全不同了:outerText 不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。比如:

这行代码实际上相当于如下两行代码:

本质上,新的文本节点会完全取代调用 outerText 的元素。此后,该元素就从文档中被删除,无法访问。

5、value 属性

属性可设置或返回密码域的默认值。获取文本框的值。

6、text()

设置或者获取所选元素的文本内容

1)无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String。

2)有参text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).返回一个jquery对象。

7、html():

设置或者获取所选元素的内容(包括html标记)

1)无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String。

2)有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象。

8、val()方法

主要用于获取表单元素的值如input, select 和 textarea。当在一个空集合上调用,它返回undefined;1)无参 val():获取匹配的元素集合中第一个元素的当前值。例子:HTML代码:

控制台输出:

2)有参val(val):设置每一个匹配元素的值。返回一个jquery对象。

大家对以上的8个javascript获取元素的方法是否有了一些了解呢?根据获取元素方法的不同,所应用的场景也不相同。想要熟练地使用这8种方法,就需要了解它们各个特征。更多关于前端培训的问题,欢迎咨询云和数据官网。云和数据拥有多年IT培训服务经验,采用全程面授高品质、高体验培养模式,拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦

实际开发当中,我们经常会遇到类似诸如下面的需求:

  1. 获取满足特定条件的数组中的所有项目
  2. 要检查是否满足条件?
  3. 检查数组中是否有特定值?
  4. 在数组中找到指定值的索引?

在本文中,我们将讨论四种可用于搜索数组中项目的方法。这些方法是:

  1. filter
  2. find
  3. includes
  4. indexOf

接下来,我们就一起来看一下这四种方式

Array.filter()

我们可以使用 Array.filter() 方法在数组中查找满足特定条件的元素。

例如,如果我们要获取大于10的数字数组中的所有项目,则可以执行以下操作:

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

使用 array.filter() 方法的语法如下:

let newArray = array.filter(callback);

着这里:

  • newArray是返回的新数组
  • array 是我们要进行查找的数组本身
  • callback 是应用于数组每个元素的回调函数

如果数组中没有项目符合条件,则返回一个空数组。

有时,我们不需要满足特定条件的所有元素。我们只需要一个符合条件的元素。在这种情况下,需要使用find()方法。

Array.find()

使用 Array.find()方法查找满足特定条件的第一个元素。就像 filter 方法一样,它以回调为参数,并返回满足回调条件的第一个元素。

我们尝试一下在上面的示例中对数组使用 find 方法。

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen)//11

array.find() 的语法为

let element = array.find(callback);

callback 是在数组中的每个值上执行的函数,带有三个参数:

  • element -当前被遍历的元素(必填)
  • index -当前遍历的元素的索引/位置(可选)
  • array- 当前数组(可选)

但是请注意,如果数组中没有项目符合条件,则返回 undefined。

但是,如果想检查某个元素是否在数组中怎么办?

Array.includes()

includes() 方法确定数组是否包含某个值,并在适当时返回 true 或 false。

因此,在上面的示例中,如果我们要检查20是否为数组中的元素之一,则可以执行以下操作:

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty)//true

你会注意到此方法与其他方法之间的区别。此方法接受值而不是回调作为参数。这是 include 方法的语法:

const includesValue = array.includes(valueToFind, fromIndex)
  • valueToFind 是要在数组中检查的值(必填)
  • fromIndex 是要开始从中搜索元素的数组中的索引或位置(可选)

要了解索引的概念,让我们再次使用上面的示例。

如果要检查数组是否在第一个元素之外的其他位置包含10个,可以执行如下操作:

const array = [10, 11, 3, 20, 5];

const includesTenTwice = array.includes(10, 1);

console.log(includesTenTwice)//false

Array.indexOf()

indexOf() 方法返回可以在数组中找到给定元素的第一个索引。如果数组中不存在该元素,则返回 -1。

回到例子。让我们找到数组中 3 的索引。

const array = [10, 11, 3, 20, 5];

const indexOfThree = array.indexOf(3);

console.log(indexOfThree)//2

其语法类似于该 includes 方法的语法。

const indexOfElement = array.indexOf(element, fromIndex)
  • element 是要在数组中检查的元素(必填),并且
  • fromIndex 是要从数组中搜索元素的启始索引或位置(可选)

请务必注意,includes 和 indexOf 方法都使用严格的相等性('===')搜索数组。如果值的类型不同(例如4和'4'),它们将分别返回 false 和 -1。

总结

使用这些数组方法,无需使用 for 循环即可搜索数组。根据您的需求,您可以决定哪种方法最适合您的用例。

以下是何时使用每种方法的摘要:

  • 如果你想找到在符合特定条件的阵列中的所有项目,使用 filter。
  • 如果你想检查是否至少有一个项目符合特定的条件,请使用 find。
  • 如果你想检查一个数组包含一个特定的值,请使用 includes。
  • 如果要在数组中查找特定项目的索引,请使用indexOf 。

例1:

<!DOCTYPE html>
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>获得元素节点</h2>
<p><input type="text" id="username" value="tom"></p>
<p><input type="text" id="useremail" value="tom@163.com"></p>
</body>
</html>
<script type="text/javascript">
//② document.getElementsByTagName(tag标签名称)
// 该方法会返回一个对象集合(无论对应的节点有几个)
var hh = document.getElementsByTagName('h2');
console.log(hh);//对象集合 HTMLCollection[h2]
//两种方式 可以从对象集合中 获得具体的一个元素节点对象
console.log(hh[0]); //<h2>
console.log(hh.item(0)); //<h2>
var ipt = document.getElementsByTagName('input');
console.log(ipt);//HTMLCollection[input#username 属性(attribute)值 = "tom", input#useremail 属性(attribute)值 = "tom@163.com"]
console.log(ipt.item(1));
</script>

关于节点的获取需待HTML加载完毕后, javascript代码才能执行;

为此可以使用DOM1事件机制、window.onload语句、将javascript语句放在HTML语句最后;

而DOM2事件机制(即事件监听函数)要放在window.onload语句中, 或者放在HTML语句最后;

实例2: