素材巴巴 > 程序开发 >

a标签获取input值_JS中获取元素属性的方法

程序开发 2023-09-13 06:10:40
e037ac29166bf8e487fae3471d981d3d.gif 阅读本文约需要6分钟

大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务!

1、长期为你提供最优质的学习资源!

2、给你解决技术问题!

3、每天在朋友圈里分享优质的技术文章!

4、每周1、3、5送纸质书籍免费送给大家,每年至少送书800本书!

5、为大家推荐靠谱的就业单位!

请注意!我上面说的5点全部都是免费的!全网你应该找不到第二家吧!

当然,大家在我私人微信上问我问题,仅限回答web前端、java相关的。

---------------------------

好了,接下来开始今天的技术分享!上次老师跟大家分享了NPM 快速使用开发技巧的知识,今天跟大家分享下JS中获取元素属性的方法的知识。 

0 前言 在Web前端开发中经常用到的技术:获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val()】 这些方法,大家应该用过,如果让你说出它们的一些区别和联系,能答得上来吗?接下来让我们一起来温故下。 首先我们需要把它们归类下:
innerHTML、outerHTML、innerText 、outerText、value 属于原生javascript的方法。text()、html(),val()属于jQuery中的方法。
1 innerHTML属性 在读模式下,innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记。在写模式下,innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点。下面是一个例子:

This is a paragraph with a list following it.

Item 1 Item 2 Item 3

对于上面的

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

This is a paragraph with a list following it.

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

This is a paragraph with a list following it.

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

This is a paragraph.p>";

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

var p = document.createElement("p");p.appendChild(document.createTextNode("This is a paragraph."));div.parentNode.replaceChild(p, div);

结果,就是新创建的

元素会取代 DOM 树中的

元素。 replaceChild() 方法用新节点替换某个子节点。 语法:

node.replaceChild(newnode,oldnode)

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

This is a paragraph with a list following it.

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

This is a paragraph with a list following it.Item 1Item 2Item 3

使用 innerText 属性设置这个 元素内容,则只需一行代码:
div.innerText = "Hello world!";
执行这行代码后,页面的 HTML 代码就会变成如下所示:
Hello world!div>
设置 innerText 属性移除了先前存在的所有子节点,完全改变了 DOM 树。 设置 innerText 永远只会生成当前节点的一个子文本节点,而为了确保只生成一个字文本节点,就必须要对文本进行 HTML 编码。利用这一点,可以通过 innerText 属性过滤掉 HTML 标签。方法是将 innerText 设置等于 innerText,这样就可以去掉所有 HTML 标签,比如:
div.innerText = div.innerText;
执行这行代码后,就用原来的文本内容替换了容器元素中的所有内容(包括子节点,因而也就去掉了 HTML 标签)。举个栗子:
输出:

9193dc0d876b20f93acf774ec80d0bf2.png

4 outerText属 性 除了作用范围扩大到了包含 调用它的节点之外,outerText 与innerText 基本上没有多大区别。在读取文本值时,outerText 与 innerText 的结果完全一样。但在写模式下,outerText 就完全不同了:outerText 不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。比如:
div.outerText = "Hello world!";
这行代码实际上相当于如下两行代码:

var text = document.createTextNode("Hello world!");div.parentNode.replaceChild(text,div);

本质上,新的文本节点会完全取代调用 outerText 的元素。此后,该元素就从文档中被删除,无法访问。 5 value属性 属性可设置或返回密码域的默认值。获取文本框的值。 6  text()属性 1)无参text(): 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String。

0e2d6ad8cab6cb5c9a80b230ea2a3a60.png

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

5f6b777ddfebf8f7533622d8f2656c05.png

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

08de717f4f09747e34685d2811d0c75d.png

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

bc967ddbadcc2ce01df4b189bc7b4a25.png

8 val()属性 主要用于获取表单元素的值如input, select 和 textarea。当在一个空集合上调用,它返回undefined; 1)无参 val() : 获取匹配的元素集合中第一个元素的当前值。例子: HTML代码:
type="text" value="你好啊">type="text" value="啊哈哈哈">type="text" value="嘻嘻嘻嘻">

控制台输出:

892df445d7b2c119e165a85538c3a46d.png

2)有参val(val):

设置每一个匹配元素的值。返回一个jquery对象。

a61b915a250054722ef620f506ab0095.png

总结 对于这八大方法:innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val()。您现在是否已经很清晰了? 今天就分享这么多,关于JS中获取元素属性的方法,你学会了多少?欢迎在留言区评论,对于有价值的留言,我们都会一一回复的。如果觉得文章对你有一丢丢帮助,请点右下角【在看】,让更多人看到该文章。 c29f34b4fe576f523520f1a88b81cc07.gif

1472e04160a5f716f672cbe49a82ab9d.png


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。