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

时间:2022-06-25 17:54:39

形如如下格式的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”,其代表的插入位置如下图:

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

另一种情况是只需要获取其纯文本的内容,这时可以使用元素对象的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属性还将如愿返回值。