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

相关文章
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
146 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
62 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
101 33
|
3月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
109 2
|
4月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
80 3
|
4月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
61 4
|
4月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
4月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
134 0
html5+three.js公路开车小游戏源码

热门文章

最新文章