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

形如如下格式的html元素:

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

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

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

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

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

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

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

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

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

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

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

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

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!!!">]
*/
1
2
3
4
5
6
7
8
9
10
11
12

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