1. 获取标签的内容
- innerHTML识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 [高版本的浏览器会将格式原样打印];
- innerText 不识别标签, 在获取标签内容时去除所有标签
- value获取标签的value属性值
实例如下:
解析:
(1) 控制台的打印内容中, 第一段(以虚线划分) 使用innerHTML获取到<div>标签内的所有内容,包括<p>标签对和<img>标签; 笔者使用浏览器版本较新,按照代码格式输出标签内容;
(2) 第二段为使用innerText获取的<div>标签中去除标签的其他内容, 无格式,直接输出. 此外, <img>标签为不是标签对, 内容也不识别;
(3) 第三段是使用value获取的<input>标签的value属性.
2. 修改标签内容
- 使用innerHTML,相当于给标签中加入HTML代码;
- 使用innerText,相当于给标签中加入文本内容;
- value相当于修改控件显示内容
实例:
解析:
(1) 使用innerHTML添加的识别标签, <p>我是新加入的</p>是一个标签对,在浏览器上显示时显示的是"我是新加入的"; "hi"是文本,二者根据是否有标签对进行区分;
(2)使用innerText添加的内容为纯文本,添加什么内容都作为<div>标签内的文本, 浏览器上直接打印出来,不识别<p>标签;
(3) 使用value添加的内容直接改变了控件显示的文本内容,至于为什么控制台上打印的input标签的value值未改变,在下暂时不清楚. 等待大神解答.
notes: innerText不是W3C标准定义的语句,innerHTML才是,如果需要实现获取的内容不包含标签,可以通过添加正则表达式的方法实现,正则表达式参考链接:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
笔者还是个初学者. 如有理解偏差,请诸位大神不吝赐教,多谢多谢~~~