dom控制文本节点

欢迎 欢迎     2022-10-03     762

关键词:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM控制文本节点</title>
</head>
<script type="text/javascript">
function processText(method){
var paraNode=document.getElementById("pId");
if(!paraNode.hasChildNodes())return; //检查元素是否有子节点

var textNode=paraNode.firstChild;//获取element 中的文本节点
if (textNode.nodeType==textNode.TEXT_NODE)//如果此接口类型为文本节点
{
switch(method){
case 0:
textNode.data=textNode.data.toUpperCase();
break;

case 1:
textNode.data=textNode.data.toLowerCase();
break;

case 2:
textNode.appendData("<_and>try you best to do it");
break;

case 3:
var preserveText=textNode.substringData(0,15);
textNode.replaceData(0,textNode.length-1,preserveText);
break;

case 4:
textNode.deleteData(0,textNode.length);
break;
}
}
else{
alert("没有字符串");
}
}
</script>
<body>
<!--1.CharacterData.data属性 CharacterData接口定义data 表示文本的内容
2.CharacterData.appendData()方法. CharacterData接口定义appendData()方法可以在文本末尾追加字符串
3.CharacterData.substringData(offset,count)方法,CharacterData定义substringData可以截取文本中的字符串
4.CharacterData.replaceData(offset, count,arg)方法,replaceData()定义可以替换文本内容
5.CharacterData.deleteData(offset,count),定义了删除字符串
offset 表示删除的起始位置,count表示删除的字符数-->

<p id="pId">
Do not pray for an easy life ,pray for the strength to endure a difficle one
</p>
<input type="button" value="转换成大写" onclick="processText(0)" />
<input type="button" value="转换成小写" onclick="processText(1)" />
<input type="button" value="追加新字符" onclick="processText(2)" />
<input type="button" value="保留前十个字符" onclick="processText(3)" />
<input type="button" value="删除全部文" onclick="processText(4)" />

<div id="divId"></div>


</body>
</html>

dom

...象模型DOM(DocumentObjectMod)为了使我们更够通过编程的方式控制网页,W3C提出了文档对象模型DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。DOM定义的节点文档节点Document,文本节点Text,注释节点Comment,属性节点Attr等。所有... 查看详情

python读取xml时文本节点显示元素节点

....childNodes:ifrt.nodeName=='maxid':printrt.nodeTypeprintrt.nodeName控制台显示:1maxid1是元素节点,不能取得值,求解这里的4是作为maxid的子字节点存在的,所以你需要再遍历一层dom = xml.dom.minidom.parse(\'c:/12345.xml\')root = dom.documentElementfo... 查看详情

dom基础

DOM(documentobjectmodel)由节点构成,元素节点,文本节点,属性节点是一份DOM的所有组成。<pid="p">thisisanode</p>上面代码分解:    <p></p>是一个元素节点,thisisanode是文本节点,id="p"是属性节点。三种节点关系:... 查看详情

dom(documentobjectmadle)文档对象模型:元素节点文本节点属性节点

【DOM树节点】 DOM节点分为三大类:元素节点文本节点属性节点文本节点属性节点为元素节点的两个子节点通过getElement系列方法,可以去到元素节点。 【查看节点】 1、document.getElementById:通过ID获取唯一的节点;多个... 查看详情

dom模型

...html>、<body>、<meta>和<h1>等都是元素节点。文本节点:文本节点是向用户展示的类容,在XHTML中文本节点总是被包含在元素节点的内部,但是元素节点并不一定包含文本节点,比如说<ul>。属性节点:属性总是被... 查看详情

dom中元素节点,属性节点,文本节点的理解

...型。最重要的节点类型是:元素类型节点类型元素1属性2文本3注释8文档9在实际应用中,经常用到的就是元素节点、属性节点和文本节点了,下面我们通过小段代码进行讲解1:元素节点 <HEAD&g 查看详情

dom节点和dom元素的区别

...、HTML元素(标签)-元素节点、HTML属性-属性节点、元素内的文本-文本节点(文字、换行、空格、回车)、注释-注释节点DOM元素(element):HTML页面中所有的标签,元素包含在节点之中元素是节点中的一种,元素对象(Element对象)内可以包... 查看详情

javascript_dom

...DocumentType-DTD引用即<!DOCTYPE>。元素节点Element-标签。文本节点Text-标签中的文本或CDataSection内包含的普通文本。属性节点Attr-元素的属性。CDataSection-通常是文本节点和注释节点的父类。注释节点Comment-注释。<!DOCTYPEhtml>< 查看详情

dom中节点

...文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点node节点节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元... 查看详情

dom中文本节点索引方法

问题对于jquery接口text()只能取到有标签的dom对象中文本内容。如果索引对象本身就是文本节点,则不好索引到,没有相关的索引选择器。 例如:对于<input>aaa形式的代码,$("input").next().text(),则不能返回aaa。 下面有... 查看详情

请资深专家解答,javascript的dom问题?

...script的dom问题?dom文档对象模型的是由元素节点,属性节点,文本节点,这三个节点构成的模型那么也就是说元素节点,属性节点,文本节点都是dom对象,可为什么其他人说属性节点和文本节点不是dom对象呢?第一个问题:属性节点是一个接... 查看详情

用 HTML 表示文档 DOM:兄弟文本节点

】用HTML表示文档DOM:兄弟文本节点【英文标题】:RepresentingDocumentDOMinHTML:SiblingTextNodes【发布时间】:2018-09-0612:33:41【问题描述】:我在veryoldcomment中读到了@Bergi的这句话,讨论了nextSibling的价值:x.nextSibling可能不是跨度,而是... 查看详情

dom节点对象之创建和插入节点示例

...点。  1、新建节点:createElement("节点名")  2、新建文本节点:createTextNode("文本内容")  3、将文本节点添加到新建节点中:appendChild(文本节点名)  4、获取要插入节点的对象:getElementById("id名")  5、将新建节点插入到... 查看详情

javascript之dom的三大节点及部分用法

DOM有三种节点:元素节点、属性节点、文本节点。 一、用nodeType可以检测节点的类型节点类型nodeType属性值元素节点1属性节点2文本节点3       这样方便在js中对各个节点进行操作。 元素节点:htm... 查看详情

DOM 操作:如何在按钮单击时创建文本节点

】DOM操作:如何在按钮单击时创建文本节点【英文标题】:DOMManipulation:HowtoCreateaTextNodeonButtonClick【发布时间】:2019-04-0901:29:40【问题描述】:"usestrict";varmyButton=document.getElementById("myButton");myButton.onclick=function() varnewNode=document.cre 查看详情

dom遍历节点以及属性

...nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。二、遍历节点属性  Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中 查看详情

dom获取dom动态创建节点

... 2、我们常用的节点类型    元素(标签)节点、文本节点、属性节点(也就是标签里的属性)、  3、document有个属性叫nodeType返回的是数字    1:代表元素节点    2:代表属性节点    3:代表文本节点 ... 查看详情

05.dom

...谷歌其次ie最差尤其是ie6-8DOM节点节点分为:元素节点和文本节点测试节点的类型用nodeTypenodeType为3时是文本节点nodeType为1时是元素节点childNodes节点不兼容要做判断一般用childrenchildren子节点只算第一层parentNode父节点<!DOCTYPEHTML&g... 查看详情