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属性还将如愿返回值。

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
10天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
10天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
18天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
19天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
|
安全 数据安全/隐私保护
HTML表单元素
HTML表单元素
8 0
|
1月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
17 0