栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

DOM中text节点详解

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

DOM中text节点详解

        图中箭头所指的地方在DOM中就是text节点对象。下面将要了解:1,JavaScript中使用firstchild准确的找到需要修改的text节点(很明显一颗dom tree中不止一个text节点) ;2,使用JavaScript增加,删除,修改选定的text的内容。

目录

一,总览

二,属性详解

1,data属性

1.1定位到需要操作的text节点

1.2读取和修改选定的text节点内容

2,length属性

三,方法详解

1,appendData()

2,deleteData()

3,insertData()

4,replaceData()

5,substringData()

6,remove()


一,总览

        text节点的属性与方法如下。

二,属性详解

1,data属性

1.1定位到需要操作的text节点

1.2读取和修改选定的text节点内容
p.data;//读取内容
p.data = 'new context';//设置内容

2,length属性
p.length;//得到text内容长度

三,方法详解

1,appendData()

        在Text节点尾部追加字符串。

Hello world

var pElementText = document.queryselector('p'); pElementText.firstchild.appendData('!');//页面显示 Hello world!

2,deleteData()

        删除Text节点内部的子字符串,第一个参数为子字符串开始位置,第二个参数为子字符串长度。

Hello world

var pElementText = document.queryselector('p'); pElementText.firstchild.deleteData(5,7);//从第五个开始删除,一共删除7个 //页面显示 Hello

3,insertData()

        在Text节点插入字符串,第一个参数为插入位置,第二个参数为插入的子字符串。

Hello world

var pElementText = document.queryselector('p'); pElementText.firstchild.insertData(7,'Hello ');//页面显示Hello wHello

4,replaceData()

        用于替换文本,第一个参数为替换开始位置,第二个参数为需要被替换掉的长度,第三个参数为新加入的字符串。

Hello world

var pElementText = document.queryselector('p'); pElementText.firstchild.replaceData(7,5,'world' );//页面显示 Hello wworld

5,substringData()

        用于获取子字符串,第一个参数为子字符串在Text节点中的开始位置,第二个参数为子字符串长度。

Hello world

var pElementText = document.queryselector('p'); var sub_context = pElementText.firstchild.substringData(7,10);

6,remove()

        remove方法用于移除当前Text节点。移除之后不再在网页上显示。

Hello world

document.queryselector('p').firstchild.remove(); //现在 HTML代码为

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/996250.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号