精华内容
下载资源
问答
  • 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:nodeName 所包含的 XML 元素的标签名称永远是大写的 nodeValue ...
  • Text类型文本节点由Text 类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符,但不能包含HTML 代码。Text 节点具有以下特征:  nodeType 的值为3;  nodeName 的值为”#text...

    Text类型

    文本节点由Text 类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的
    HTML 字符,但不能包含HTML 代码。Text 节点具有以下特征:
    nodeType 的值为3;
    nodeName 的值为”#text”;
    nodeValue 的值为节点所包含的文本;
    parentNode 是一个Element;

     不支持(没有)子节点。
    可以通过nodeValue 属性或data 属性访问Text 节点中包含的文本,这两个属性中包含的值相
    同。对nodeValue 的修改也会通过data 反映出来,反之亦然。使用下列方法可以操作节点中的文本。

    appendData(text):将text 添加到节点的末尾。
    deleteData(offset, count):从offset 指定的位置开始删除count 个字符。
    insertData(offset, text):在offset 指定的位置插入text。
    replaceData(offset, count, text):用text 替换从offset 指定的位置开始到offset+
    count 为止处的文本。
    splitText(offset):从offset 指定的位置将当前文本节点分成两个文本节点。
    substringData(offset, count):提取从offset 指定的位置开始到offset+count 为止
    处的字符串。
    除了这些方法之外,文本节点还有一个length 属性,保存着节点中字符的数目。而且,
    nodeValue.length 和data.length 中也保存着同样的值。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>工作记事本</title>
    </head>
    
    <body>
        <div id="wordText">这个是文本节点</div>
    </body>
    
    <script>
        var b = document.getElementById("wordText");
        var text = b.childNodes.item(0);    //获取第几个子节点文本值
        console.log(text.nodeValue);
        text.appendData("加到后面的文本"); //文本节点追加新值
        console.log(text.nodeValue);
        text.deleteData(0,2);   //删除指点位置文本
        text.insertData(1,"insert");    //插入指点位置文本
        text.replaceData(1,3,"插入的值");   //插入指点位置文本
        text.splitText(2);  //指点位置拆分文本节点,原文本节点不变,返回拆分后的后面那部分的节点。
        text.substringData(1,3);    //方法跟字符串处理函数 stringObject.substr(start,length);方法类似
    </script>
    
    </html>
    展开全文
  • 2.然后用 递归 循环 head ,body 的所有节点 其中包括 注释节点, 转换成 render 函数节点 (期间添加N多个自动化方法),这样就可以在vue 中渲染页面实现想要 自动化的功能 render 函数参数...

    最近在研究一个自动化项目, 让使用者可以直接编辑网页上得模块  (用 Vue 写的)

    项目业务

    1.首先 从数据库 获取 head 和 body 的innerHTML 文本

    2.然后用 递归 循环 head ,body 的所有节点 其中包括 注释节点, 转换成 render 函数节点 (期间添加N多个自动化方法),这样就可以在vue 中渲染页面实现想要 自动化的功能

    render 函数参数 使用方法简介 : 

    render 中返回一个 h函数 h(元素名,{ 元素上绑定的,事件,attrs,style,class ....等 }, [子节点 h(...), h(...), h(...) , ...... ])

    import Vue from 'vue'
    
    let VNode = new Vue({
        created () { // 生命周期 },
        render ( h ) { // render 创建虚拟DOM 直到渲染
           return h ('div', {...}, [...])
        },
        methods: { // 方法 },
        data () {
            return { // 数据 }
        }
    }).$mount()
    
    export default VNode
    

    小栗子:

    // 递归所有DOM节点 生成 VNode 函数
          childs (node, h) {
            let childNode = []
            let flage = false
            node.childNodes.forEach(ele => {
              if (ele.childNodes.length > 0) {
                childNode.push(this.childs(ele, h))
              } else {
                if (ele.nodeType === 1) {
                  childNode.push(h(ele.tagName, this.setAttr(ele.attributes)))
                } else {
                  if (ele.nodeType === 8) {
                    let notes = h('', {})
                    notes.text = ele.nodeValue
                    childNode.push(notes)
                  } else {
                    if (ele.nodeValue.replace(/\s/g, '') !== '') flage = true
                    childNode.push(ele.nodeValue)
                  }
                }
              }
            })
            return h(node.tagName, this.setAttr(node.attributes, flage), childNode)
          },
          // 还原 attributes 属性
          setAttr (attr, flage) {
            let obj = {
              style: {},
              attrs: {},
              on: {}
            }
            if (flage) obj.attrs['contenteditable'] = true
            for (let key in attr) {
              if (attr.hasOwnProperty(key)) {
                if (attr[key].nodeName === 'href') {
                  obj.attrs[attr[key].nodeName] = path.resolve(__dirname, 'static/' + (attr[key].nodeValue.split('/').pop()))
                } else if (attr[key].nodeName === 'src') {
                  obj.attrs[attr[key].nodeName] = path.resolve(__dirname, 'static/images/' + (attr[key].nodeValue.split('/').pop()))
                } else {
                  obj.attrs[attr[key].nodeName] = attr[key].nodeValue
                }
              }
            }
            return obj
          }

    问题:

     

    1. render 函数 怎么添加字符串节点

    h 函数 第一个参数 必须填 标签名, 如果不填 就会渲染成 注释的空节点  <!-- -->
    所以最好 在子集数组中 push 字符串 自动生成字符串节点
    我也试过 在对象中 添加 innerText 属性, 虚拟节点时能看到结构, 但渲染真是DOM 后 添加innerText的元素 子级元素 就全没了

    
    h('div', {...}, ['我是字符串节点1', '我是字符串节点2'])

     

    2. render 函数 怎么添加 注释节

    let notes = h('', {})  // 首先创建一个空节点 render 会创建出一个
    
    notes.text = '我是被注释的内容'
    
    此时 notes 虚拟节点 最后会被渲染成 :  <-- 我是被注释的内容 -->

     

    VNode 虚拟节点属性作用 参考

    children              子节点,数组,也是VNode类型。
    text                  当前节点的文本,一般文本节点或注释节点会有该属性。
    elm                   当前虚拟节点对应的真实的DOM节点。
    ns                    节点的namespace。
    context               编译作用域。
    functionalContext     函数化组件的作用域。
    key                   节点的key属性,用于作为节点的标识,有利于patch的优化。
    componentOptions      创建组件实例时会用到的信息选项。
    child                 当前节点对应的组件实例。
    parent                组件的占位节点。
    raw                   原始html。
    isStatic              静态节点的标识。
    isRootInsert          是否作为根节点插入,被<transition>包裹的节点,该属性的值为false。
    isComment             当前节点是否是注释节点。
    isCloned              当前节点是否为克隆节点。
    isOnce                当前节点是否有v-once指令。

     

    展开全文
  • Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装  1. 作用:所有类选择器名为cName的标签  参数:类选择器的名(class名)  返回值:所有类选择器名为cName的标签   function getClass(cName){ ...

    Js基础学习之 --  DOM兼容 根据标签、类名获取节点函数封装


                     1.    作用:所有类选择器名为cName的标签

          参数:类选择器的名(class名)
      返回值:所有类选择器名为cName的标签
    function getClass(cName){
     		    var arr = [];
    	 		var allTag = document.getElementsByTagName("*");
    	 		for(var i = 0; i < allTag.length; i++){
    	 			if(allTag[i].className == cName){
    	 					arr.push(allTag[i]);
    	 			}
    	 		}
    	 			return arr;
    	 		} 



    测试:console.log(getClass("Name"));
     
     2.   作用:返回过滤空白文本节点和注释节点后的元素节点集合
                 参数1:父级节点
               返回值:元素节点集合
     <pre name="code" class="javascript"><pre name="code" class="javascript">function getChildNodes(element){
     			var arr = [];
    	 		var eList = element.childNodes;
    	 		for(var i = 0;i < eList.length;i++){
    	 			if(eList[i].nodeType == 1){//过滤空白节点
    	 				arr.push(eList[i]); 
    	 			}
    	 	    } 
    	 		     return arr;
    	 	}


     
    
     
    

            调用示例:
              var obj = getChildNodes(父级节点对象);
    console.log(obj);


    3.   作用:获取最后一个孩子节点
        参数1: 父级元素对象
      返回值:返回此对象的最后一个非空孩子节点
    <pre name="code" class="javascript">	 		function getlastChild(element){
     				var lChild = null;
    	 			var allsubobj = element.childNodes;
    	 			for(var i=allsubobj.length-1;i >= 0;i--)
    	 				if(allsubobj[i].nodeType == 1){//过滤空白节点
    	 					lChild = allsubobj[i];
    	 					break;
    	 				}
    	 				return lChild;


     
    
     4.  作用:获取第一个孩子节点
        参数1:  父级元素对象
      返回值:返回此对象的第一个非空孩子节点
    <pre name="code" class="javascript">function getfirstChild(element){
     				var fChild = null;
    	 			var eList = element.childNodes;
    	 			for(var i = 0;i < eList.length;i++)
    	 				if(eList[i].nodeType == 1){//过滤空白节点
    	 					fChild = eList[i];
    	 					break;
    	 				}
    	 				return fChild;
    	 		} 


     
    

     5.   作用:获取下一个非空节点
         参数1:  元素对象
       返回值:返回此对象的下一个非空节点  
    <pre name="code" class="javascript">function getNextSibling(element){
     				var obj = element.nextSibling;
    	 			while(obj != null && obj.nodeType != 1){
    	 				obj = obj.nextSibling;
    	 			}
    	 			return obj;
     			}


     
    
     
    6.   作用:获取上一个非空节点
        参数1:  元素对象
      返回值:返回此对象的上一个非空节点
     
    <pre name="code" class="javascript">function getPreviousSibling(element){
     				var obj = element.previousSibling;
    	 			while(obj != null && obj.nodeType != 1){
    	 				obj = obj.previousSibling;
    	 			}
    	 			return obj;
     			}


    展开全文
  • 本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。 具体实现方法如下: 代码如下:<html> <head> [removed] function t(){  var nodeul = document.getElementsByTagName(...
  • 下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 ...这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 例子: html页面代码:Hello jquery代码:$("div")

    在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明:
    首先,html属性中有两个方法,一个有参,一个无参
    1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
    例子:
    html页面代码:<div><p>Hello</p></div>
    jquery代码:$("div").html();
    结果:Hello
    2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
    html页面代码:<div></div>
    jquery代码:$("div").html("<p>Nice to meet you</p>");
    结果:[ <div><p> Nice to meet you</p></div> ]

    其次,text属性中有两个方法,一个有参,一个无参
    1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
    例子:
    html页面代码:<p><b>Hello</b> fine</p>
    <p>Thank you!</p>
    jquery代码:$("p").text();
    结果:HellofineThankyou!

    2.有参text(val):设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
    html页面代码:<p>Test Paragraph.</p>
    jquery代码:$("p").text("<b>Some</b> new text.");
    结果:[ <p><b>Some</b> new text.</p> ]

    最后,val()属性中也有两个方法,一个有参,一个无参。
    1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
    返回的是一个String、 array
    例子:
    html页面代码 :

    复制代码 代码如下:

    <p></p><br/>
    <select id="single">
    <option>Single</option>
    <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
    </select>

    jquery代码:$("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));
    结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
    2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
    html页面代码:
    <input type="text"/>
    jquery代码:$("input").val("hello world!");
    结果:hello world!
    展开全文
  • 在前面的博客中,我浅薄的学习了Vue 源码中 的 ...在这一系列的函数里面,有很多的钩子函数,类似于 destory 和 create 、insert 的 钩子函数,事实上 这些 钩子函数 用户使用的时候是无知觉的,因为 这个是虚拟 dom ..
  • MFC项目开发过程中需要获取某个树控件下某个树节点下所有的子节点文本,添加到某个组合框上,网上的相关代码差不多是遍历整个树控件,所以自己就封装了一个函数,用于获取指定树节点下的所有的子节点文本然后...
  • 浅析~DOM结构中的元素节点、属性节点、文本节点

    万次阅读 多人点赞 2018-08-28 12:10:06
    首先明确什么是DOM: DOM=DocumentObjectModel,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改...最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围...
  •  1.文档:DOM中的“D” 当创建了一个网页并把它加载到Web浏览器...只能通过某个特定对象去调用的函数称为这个对象的方法。 js中对象分为三种: (1)用户自定义对象 (2)内建对象:内建在js中的对象。包括
  • //当整个窗体加载完毕之后 触发该匿名函数 window.onload = function(){ //document 获取根元素 var root = document.documentElement; //遍历所有的节点 iteratorNodes(root); document.write(msg); }...
  • DOM将文档看作一颗树,其中的每个成分都是对象,这些对象都看作是节点。可以将文档的一切都理解成节点...Object(对象):DOM中的每个节点都是对象,通过对象的属性和方法就能够操作节点。 Model(模型):DOM将整个文档
  • 本节讲Dom和Bom模型概念讲解(节点获取,window对象)。 out.js: 写了2个输出到页面的函数。function println(param){ document.write(param+" "); } function print(param){ document.write(param); }window...
  • 修改xml文件节点文本

    2019-05-30 10:51:43
    因为获取文本值用的是 GetText() 函数,所以想当然的想使用 SetText,然后悲剧的发现只有SetValue 然后用了 SetValue,发现改变的是节点的名字,而不是节点文本内容。 具体解决办法如下: //text是element的...
  • 介绍下js获取节点的兄弟、父级与子元素的方法,学习下js遍历节点的操作方法,有需要的朋友参考下。   先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY...
  • 在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等...令人欣慰的是,使用JavaScript获取节点方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通
  • tinyxml 设置节点文本

    千次阅读 2019-02-22 20:07:45
    因为获取文本值用的是 GetText() 函数,所以想当然的想使用 SetText,然后悲剧的发现只有SetValue 然后用了 SetValue,发现改变的是节点的名字,而不是节点文本内容。 具体解决办法如下: //text是element的...
  • 获取文本列表为 [ '\n ' , '\n ' , '经验 3 - 5 年 / 本科\n ', ' \n ', ' \n ', ' \n ', ' \n ', ' \n ', ' \n ', ' \n ' ] 竟然有十条文本,莫名奇妙会多很多文本,而我只是想要div块中的...
  • 点击每个li节点,都弹出其文本值 1,获取所有的li节点 ...4,在响应函数获取当前节点文本值 this 为正在响应事件的那个节点 alert(this.firstChild.nodeValue); 点击每个li节点,若li节点文本值没有
  • 一般可以通过触发元素事件,通过$(this)获取当前元素dom,从而进行相应操作。 例: $("#id").on("click",function(){ console.log( $(this).html()); }) 但如果是通过调用方法,对当前元素dom进行操作,$(this)...
  • attr函数是用来查询和设置属性节点函数 查询属性:在attr函数中只写一个属性名就代表查询属性 注意:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值 设置属性:在attr函数中写属性名和属性值两...
  • 1.可以通过 getElementsByTagName 方法获取 getElementsByTagName("标签名称") //代表查询返回所有该标签的元素,因此他是个集合 document.getElementsByTagName("标签") //即查询文档中所有的该标签元素 alert...
  • 上拉到底后,重新请求下一页数据,然后先渲染到界面上(这样才能获取节点的初始高度)再执行下上面的函数就可以了,以下是自己的模拟测试的分页代码: /** * 页面上拉触底事件的处理函数 */ onReachBottom...
  • 在xml里有两个解析xml的函数extract和extractVALUE,这两个函数可以带两个参数,也可以带上个参数,第三个参数是命令空间,对于namespace_string,刚开始我也很疑惑,然后去网上找了很久的资料也没弄明白,因为没有...
  • node-red教程 5.4 context global与函数节点的其它功能

    千次阅读 多人点赞 2018-06-20 19:06:23
     在之前的流中,我们总是在执行函数节点时新建一个变量。函数节点执行完毕以后,这个变量的值就会丢失,没有办法保存。如果需要保存一个变量的值该如何操作?  可以借助context对象。它可以理解为上下文,或者...
  • 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码代码如下: ...
  • 这几天学了点ajax 对Jquery中获取节点文本内容函数html()、text()和val()用途区别有点混乱,索性就写出来顺便学习一下: 为了对比特意写了一点代码测试:点击"> <div>1 <div>2
  • 关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取节点 及 父节点下所有子节点(兄弟节点) &lt;ul&gt; &lt;li&gt...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,908
精华内容 43,163
关键字:

文本节点获取方法函数