javascript访问html元素的内容(1)
来源:互联网 发布:ngrok2.0 固定域名 编辑:程序博客网 时间:2024/06/06 02:10
形如如下格式的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属性还将如愿返回值。
0 0
- javascript访问html元素的内容(1)
- javascript访问html元素的内容(2)
- JavaScript访问HTML元素
- JavaScript基础(改变html元素内容)
- 用JavaScript批量访问HTML元素
- Javascript:Dom简介(查找/修改HTML元素的内容及属性)
- DOM对HTML元素的访问操作1
- JQuery的html函数(元素内容)
- jsoup设置一个元素的HTML内容
- html中组织内容的元素总结
- html中嵌入内容的元素总结
- JQ获取html元素的内容
- 跟我学JavaScript--HTML DOM--DOM访问,修改,元素
- 访问HTML中元素的方法
- html内容元素
- JavaScript- 通常用于操作 HTML 元素\通过指定的 id 来访问 HTML 元素,并改变其内容\写到文档输出
- DOM访问HTML元素
- 访问HTML元素
- Binary Search Tree Iterator
- C语言scanf函数
- linux DVB-T相关驱动装配与软件使用方法
- 从“抽象工厂方法”总结三大工厂模式
- linux系统管理命令之----高效使用top命令
- javascript访问html元素的内容(1)
- 在没有FTP的情况下,如何把本地文件上传到同一局域网中的另一台电脑上?
- java生成excel
- WPF——自定义命令
- Linux学习笔记之RedHat Enterprise Linux 6.4 使用 Centos 6 的yum源问题
- Centos自动删除过期备份或者文件
- oracle 下 创建数据库和用户界面操作 和sql 语句 下的创建方法
- 《像程序员一样思考》读书笔记
- Mac下androidStudio的安装