文本节点获取方法函数

vue render 函数如和创建 html 注释节点，如何创建文本节点

2020-01-22 14:01:23

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指令。

收起

展开全文

java-web js实现省市联动（使用元素节点，文本节点的方法）补：jquery的再次实现

2018-07-13 17:12:54

实现步骤：第一步：确定事件(onchange)并为其绑定一个函数第二步：创建一个二维数组用于存储省份和城市第三步：获取用户选择的省份 ...第九步：将城市文本节点添加到option元素节点中去第十步...

实现步骤：

 

第一步：确定事件(onchange)并为其绑定一个函数

第二步：创建一个二维数组用于存储省份和城市

第三步：获取用户选择的省份

第四步：遍历二维数组中的省份

第五步：将遍历的省份与用户选择的省份比较

第六步：如果相同，遍历该省份下所有的城市

第七步：创建城市文本节点

第八步：创建option元素节点

第九步：将城市文本节点添加到option元素节点中去

第十步：获取第二个下拉列表，并将option元素节点添加进去

第十一步：每次操作前清空第二个下拉列表的option内容。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>二级联动</title>
		<!--<script type="text/javascript">
		var books=[["红楼梦","水浒传","西游记 "],["高数","大学英语","大学语文"]];
		function change(){
			var index=document.getElementById("main").selectedIndex;
			var str="";
			for(var i=0;i<books[index-1].length;i++){
				str += "<option>" + books[index-1][i] + "</option>";
			}
			document.getElementById("sub").innerHTML=str;
		}
		</script>-->
		<script>
			 //1.创建一个二维数组用于存储省份和城市
			var cities = new Array(3);
			cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
			cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
			cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
			cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");

			function changeCity(val) {
				//7.获取第二个下拉列表
				var cityEle = document.getElementById("city");
				//9.清空第二个下拉列表的option内容
				cityEle.options.length = 0;
				//2.遍历二维数组中的省份
				for (var i = 0; i < cities.length; i++) {
					//注意，比较的是角标
					if (val == i) {
						//3.遍历用户选择的省份下的城市
						for (var j = 0; j < cities[i].length; j++) {
							//alert(cities[i][j]);
							//4.创建城市的文本节点
							var textNode = document.createTextNode(cities[i][j]);
							//5.创建option元素节点
							var opEle = document.createElement("option");
							//6.将城市的文本节点添加到option元素节点
							opEle.appendChild(textNode);
							//8.将option元素节点添加到第二个下拉列表中去
							cityEle.appendChild(opEle);
						}
					}
				}
			}
		</script>
	</head>

	<body>
		<select onchange="changeCity(this.value)">
			<option>--请选择--</option>
			<option value="0">湖北</option>
			<option value="1">湖南</option>
			<option value="2">河北</option>
			<option value="3">河南</option>
		</select>
		<select id="city">

		</select>
	</body>

</html>

 

 

jquery的实现代码

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//2.创建二维数组用于存储省份和城市
				var cities = new Array(3);
				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				
				$("#province").change(function(){
					//10.清除第二个下拉列表的内容
					$("#city").empty();
					//1.获取用户选择的省份
					var val = this.value;
					//3.遍历二维数组中的省份
					$.each(cities,function(i,n){
//						*function(i,n)中i返回的是索引而n返回的是值
						//4.判断用户选择的省份和遍历的省份
						if(val==i){
							//5.遍历该省份下的所有城市
							$.each(cities[i], function(j,m) {
								//6.创建城市文本节点
								var textNode = document.createTextNode(m);
								//7.创建option元素节点
								var opEle = document.createElement("option");
								//8.将城市文本节点添加到option元素节点中去
								$(opEle).append(textNode);
								//9.将option元素节点追加到第二个下拉列表中去
								$(opEle).appendTo($("#city"));
							});
						}
					});
					
				});
			});
		</script>

收起

展开全文

jQuery获取文本节点之 text()/val()/html() 方法区别
2020-12-10 15:34:23
下面我们来举例说明：首先，html属性中有两个方法，一个有参，一个无参 1. 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String 例子： html页面代码...
收起

jq输出文本_jQuery获取文本节点之 text()/val()/html() 方法区别

2021-02-01 06:54:37

下面我们来举例说明：首先，html属性中有两个方法，一个有参，一个无参1....这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String例子：html页面代码：Hellojquery代码：$("div").html();结果：Hell...

在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明：
首先，html属性中有两个方法，一个有参，一个无参
1. 无参html()：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String
例子：
html页面代码：
Hello
jquery代码：$("div").html();
结果：Hello
2.有参html(val)：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码：
jquery代码：$("div").html("
Nice to meet you
");结果：[ 
 Nice to meet you
 ]其次，text属性中有两个方法，一个有参，一个无参
1. 无参text()：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
例子：
html页面代码：
Hello fine
Thank you!
jquery代码：$("p").text();
结果：HellofineThankyou!
2.有参text(val)：设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "" 替换成相应的HTML实体).返回一个jquery对象
html页面代码：
Test Paragraph.
jquery代码：$("p").text("Some new text.");
结果:[ 
Some new text.
 ]最后，val()属性中也有两个方法，一个有参，一个无参。
1.无参val()：获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
返回的是一个String、 array
例子：
html页面代码 ：
代码如下:
Single
Single2
Multiple
Multiple2
Multiple3
jquery代码：$("p").append(
"Single: " + $("#single").val() + "
Multiple: " + $("#multiple").val().join(", "));
结果:[ 
Single:SingleMultiple:Multiple, Multiple3
]2.有参val(val)：设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
html页面代码：
jquery代码：$("input").val("hello world!");
结果：hello world!
jquery中html()与val()的用法区别:
1). html()与val()的区别
$("#myId").html("abc");
如果myid不存在上面的代码也不会出错，只是不进行任何操作；
var data=$("#myId").html();
如果myid不存在,data为null值
var data=$("#myId").val();
如果myid不存在,data为undefined
2). jquery如何判断元素存在
jquery选择器获取element 无论element是否存在都将返回一个对象
var my_element=$("#myId");
这里无论元素"myid"是否存在，my_element始终是一个object
使用下面的方法判断"myid"元素是否存在
if(my_element.length>0)){
alert("exist");
}else{
alert("not found");

收起

展开全文

jQuery获取文本节点之-text()与val()方法区别

2019-10-06 06:49:34

在jquery中val,text,html都能取到值,...下面我们来举例说明：首先，html属性中有两个方法，一个有参，一个无参 1....这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String 例子： html页面代码：<di...


    在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! 
引用:http://kankan1218.javaeye.com/blog/617888

转载于:https://www.cnblogs.com/chencidi/archive/2010/07/28/1786698.html

收起

展开全文

DOM启蒙：文本节点
2018-10-27 17:35:19
HTML文档中的文本表现为 Text（）构造函数的示例，即文本节点。 Text从CharacterData、Node及Object继承。 2.文本对象属性与方法属性： .data：可获取Text节点的文本值/数据 .nodeValue：可获取Text...
收起
DOM启蒙 JavaScript 读书笔记
jQuery获取文本节点之-text()/val()/html() 方法区别
2011-03-01 16:13:00
下面我们来举例说明：首先，html属性中有两个方法，一个有参，一个无参 1....这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String 例子： html页面代码： Hello jquery代码：$("div").ht...
收起
DOM节点深度克隆函数cloneNode()用法实例
2020-12-12 05:59:21
本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。具体实现方法如下：代码如下:<html> <head> [removed] function t(){ var nodeul = document.getElementsByTagName(...
收起
jQuery获取文本节点之 text()/val()/html() 方法区别详细出处参考：...
千次阅读 2013-12-20 14:14:01
下面我们来举例说明：首先，html属性中有两个方法，一个有参，一个无参 ...这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String 例子： html页面代码：Hello jquery代码：$("div")
收起
xhtml jquery string html xml
js 递归查询所有的叶子结点_JS-递归获取当前节点全部指定类型的子节点
2021-02-01 07:00:36
方法使用nodeType判断类型，在allChildNodes方法内建立递归函数将allCN封装在方法...}p中的纯文本节点p中的spanp中的em中的纯文本节点p中的em的i中的纯文本节点1p中的em的i中的spanp中的em的i中的纯文本节点2获取bod...
收起
节点
2018-10-19 20:52:33
节点的类型: 元素节点、属性节点、文本节点 通常情况下, 操作属性节点直接通过 “元素节点.属性名” 的方式来读写属性值而不是获取属性节点. 写 JS 代码的位置 2.1 具体位置在哪 2.2 window.onload 事件被触发的...
收起
JS
XML DOM 获取节点值
2008-09-11 10:41:03
nodeValue 属性用于获取节点的文本值。 getAttribute() 方法返回属性的值。实例下面的例子使用 XML 文件 books.xml。函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。获取元素的值本例使用 ...
收起
Text 节点和 DocumentFragment 节点
2018-05-09 13:38:09
我们通常可以使用父节点的firstChild， nextSibling等属性获取文本节点。可以使用document.createTextNode()方法创建文本节点 浏览器提供了一个原生的Text构造函数，它返回一个文本节点实例 // 空字符串 var ...
收起
使用refs获取节点_你想知道的关于 Refs 的知识都在这了
2021-01-05 01:50:23
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Refs 使用场景在某些情况下，我们需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个 React 组件的实例，也可能是一...
收起
53-selenium 获取所有子节点下全部内容（selenium的xpath结合etree）
千次阅读 2020-02-02 10:54:42
例如，需要获取，1年前项目发起这个文本内容。首先，我们这个是通过selenium定位标签的，然后需要提取内容，虽然是同样是通过xpath定位的，但是提取文档时，却并不能直接使用xpath中的text()或者string()方法来...
收起
python
用ajax函数读取xml，然后解析XML.html.rar
2019-07-10 00:19:09
用ajax函数读取xml，然后解析XML.html，ajax无刷新读取文件，先使用jQuery加载XML,然后建立一个代码片段，遍历所有student节点，获取id节点，获取节点文本，获取student下的email属性，构造HTML字符串，通过append...
收起
《关于实现一个函数把真实dom转换成虚拟dom原来是这么一回事》
2020-11-29 21:06:19
文章目录HTML DOM Element 对象HTML DOM 节点Element 对象Node Types节点类型 - 返回值HTML DOM querySelector() 方法语法参数值真实dom转换成虚拟dom思路注意点：文本节点的判断和节点文本的获取完整代码 ...
收起
js javascript
XML DOM NODE LIST XML DOM 节点列表
2014-04-15 13:31:17
节点列表由 getElementsByTagName() 方法和 childNodes 属性返回。实例下面的例子使用 XML 文件 books.xml。函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。从第一个元素获取文本 本例...
收起
python解析网页的三种方法
2019-12-16 23:58:00
解析网页的两种方法1.1、使用正则表达式查找网页内容中的title内容1.2、使用Xpath解析网页1.2.1、Xpath常用表达式1.2.2、使用表达式定位head和title节点1.2.3、Xpath谓语常用的表达式1.2.4、使用谓语定位head和ul...
收起
python 正则表达式
DOM知识总结
2021-02-24 18:45:12
获取生效的样式2.1 window.getComputedStyle()2.2 currentStyle2.3 自定义获取样式的函数DOM节点操作创建元素节点创建文本节点插入文档中删除节点 DOM 什么是DOM DOM： document object model 文档对象模
收起
javascript
如何自己动手写一个jQuery的API
2020-04-25 17:46:26
如何自己动手写一个jQuery的API 1.关于jQuery ...实现一个获取节点的API，并且拥有添加类名的方法，添加文本的方法，获取除自己的兄弟节点。 3.封装函数 3.1 获取节点 function(nodeOrSelector){ let nodes...
收起
javascript
jQuery的DOM操作
2019-02-27 10:38:37
首先用工厂函数$()来创建节点(同时可以加入节点的文本内容和属性内容)，再用append()把创建的节点加到页面中去； 3.插入节点方法 append() 向匹配元素加入节点 $(A).append(B)把B加到A中 appe...
收起

vue render 函数 如和创建 html 注释节点， 如何创建文本节点

小栗子：

问题：

VNode 虚拟节点属性作用 参考

java-web js实现省市联动（使用元素节点，文本节点的方法） 补：jquery的再次实现

实现步骤：

jquery的实现代码

jQuery获取文本节点之 text()/val()/html() 方法区别

jq输出文本_jQuery获取文本节点之 text()/val()/html() 方法区别

jQuery获取文本节点之-text()与val()方法区别

DOM启蒙：文本节点

jQuery获取文本节点之-text()/val()/html() 方法区别

DOM节点深度克隆函数cloneNode()用法实例

jQuery获取文本节点之 text()/val()/html() 方法区别 详细出处参考：...

js 递归查询所有的叶子结点_JS-递归获取当前节点全部指定类型的子节点

节点

XML DOM 获取节点值

Text 节点和 DocumentFragment 节点

使用refs获取节点_你想知道的关于 Refs 的知识都在这了

53-selenium 获取所有子节点下全部内容（selenium的xpath结合etree）

用ajax函数读取xml，然后解析XML.html.rar

《关于实现一个函数把真实dom转换成虚拟dom原来是这么一回事》

XML DOM NODE LIST XML DOM 节点列表

python解析网页的三种方法

DOM知识总结

如何自己动手写一个jQuery的API

jQuery的DOM操作

文本节点获取方法函数

Galera 高可用 MySQL 集群（PXC v5.6 + Ngin

vue、react diff算法的差异

JavaScript 对象

C/C++反汇编解密

java进阶day2-java程序相关事项和idea安装

太极旗：韩国国旗-源码

用于全色度屏幕内容的混合色度采样率高效视频编码

01353-计算机安全技术-01353-复习资料.doc

MySQL 性能优化（思路拓展及实操）

react

@SelectProvider的运用

为什么要学习SpringBoot

MySQL 管理利器 mysql-utilities

socks5代理软件哪里有下载地址？

VMware vSphere ESXi 7 精讲/VCSA/VSAN

pytorch-1.7.1-py3.8_cuda11.0.221_cudnn8.0.5_0.tar.bz2

实现 MySQL 读写分离的利器 mysql-proxy

用Go语言来写区块链（一）

基于电商业务的全链路数据中台落地方案（全渠道、全环节、全流程）

Linux基础优化与安全有哪些重点内容？

vue render 函数如和创建 html 注释节点，如何创建文本节点

VNode 虚拟节点属性作用参考

java-web js实现省市联动（使用元素节点，文本节点的方法）补：jquery的再次实现

jQuery获取文本节点之 text()/val()/html() 方法区别详细出处参考：...