javascript访问html元素的内容(1)

简介:

形如如下格式的html元素:

<p id="my_p">I'm <strong>BIG</strong> panda!!!</p>

有3种方式获取其内容,可以获取起全部的子内容,或是获取其子内容的text纯文本标识,或是以对象方式获取其子内容。

可以使用元素对象的innerHTML属性作为字符串标记返回其内容:

my_p.innerHTML;
//返回 I'm <strong>BIG</strong> panda!!!

html5还标准化了一个outerHTML属性,它将返回包括元素自身标记的字符串内容:

my_p.outerHTML;
//返回 <p id="my_p">I'm <strong>BIG</strong> panda!!!</p>

另一个在html5标准化的方法是insertAdjacentHTML(),它将任意html标记字符串插入到指定元素的“相邻”位置;该方法有2个参数,第一个表示插入元素的相对位置,第二个参数就是要插入的标记字符串。第一个参数可以具有以下几个值:
“beforebegin”,”afterbegin”,”beforeend”和”afterend”,其代表的插入位置如下图:
插入位置

另一种情况是只需要获取其纯文本的内容,这时可以使用元素对象的textContent属性来实现:

my_p.textContent;
//返回 "I'm BIG panda!!!"

最后一种方式是我想以对象方式来获取其子元素,我们可以直接遍历其子元素:

for(var elt = my_p.firstChild;elt!=null;elt=elt.nextSibling){
//do something with elt

为了使用方便我们可以包装一个方法来实现该功能:

HTMLElement.prototype.elements = function(){
  var elts = [];
  for(let elt = this.firstChild;elt!=null;elt=elt.nextSibling){
    elts.push(elt);
  }
  return elts;
};

my_p.elements();
/*返回 
[<TextNode textContent="I'm ">, strong, <TextNode textContent=" panda!!!">]
*/

另外对于内联的script元素来说(即没有src属性的),有一个text属性用来获取其文本,当然你用innerHTML也没问题。浏览器不显示script元素中的内容,且html解释器忽略脚本中的尖括号和星号。这使得script元素成为页面中嵌入任意文本内容的一个理想位置:我们只需要将其元素的type属性设为某些值(比如”text/x-custom-data”),就标明该脚本为不可执行的js代码。如果这样做,js解释器将忽略该脚本,但该元素仍存在于文档树中,其text属性还将如愿返回值。

相关文章
|
9月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
9月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
325 19
|
9月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
496 74
|
8月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
276 14
|
9月前
|
JavaScript API 开发者
在Vue.js中设置方法时访问$vuetify实例的正确姿势。
总之,访问 `$vuetify`实例是一种直观而有效的方法,它使得在Vue组件中处理Vuetify相关的逻辑成为可能。务必留意正确使用 `this`上下文,并确保在执行任何操作之前,Vue组件实例已经正确初始化并且可用。这种方式在组件自身逻辑与Vuetify的界面表现层之间架起了一座桥梁,使得开发者可以通过书写组件代码来控制和优化用户界面。
120 14
|
8月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
224 1
|
9月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
9月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应