我们的日常前端开发工作中,经常会用到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培训服务经验,采用全程面授高品质、高体验培养模式,拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦
实际开发当中,我们经常会遇到类似诸如下面的需求:
在本文中,我们将讨论四种可用于搜索数组中项目的方法。这些方法是:
接下来,我们就一起来看一下这四种方式
我们可以使用 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);
着这里:
如果数组中没有项目符合条件,则返回一个空数组。
有时,我们不需要满足特定条件的所有元素。我们只需要一个符合条件的元素。在这种情况下,需要使用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 是在数组中的每个值上执行的函数,带有三个参数:
但是请注意,如果数组中没有项目符合条件,则返回 undefined。
但是,如果想检查某个元素是否在数组中怎么办?
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)
要了解索引的概念,让我们再次使用上面的示例。
如果要检查数组是否在第一个元素之外的其他位置包含10个,可以执行如下操作:
const array = [10, 11, 3, 20, 5];
const includesTenTwice = array.includes(10, 1);
console.log(includesTenTwice)//false
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)
请务必注意,includes 和 indexOf 方法都使用严格的相等性('===')搜索数组。如果值的类型不同(例如4和'4'),它们将分别返回 false 和 -1。
使用这些数组方法,无需使用 for 循环即可搜索数组。根据您的需求,您可以决定哪种方法最适合您的用例。
以下是何时使用每种方法的摘要:
例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:
*请认真填写需求信息,我们会在24小时内与您取得联系。