精华内容
下载资源
问答
  • 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指令。

     

    展开全文
  • 实现步骤:   第一步:确定事件(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>

     

     

     

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

    2008-09-11 10:41:03
    nodeValue 属性用于获取节点文本值。 getAttribute() 方法返回属性的值。 实例 下面的例子使用 XML 文件 books.xml。 函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。 获取元素的值 本例使用 ...
  • 我们通常可以使用父节点的firstChild, nextSibling等属性获取文本节点。 可以使用document.createTextNode()方法创建文本节点 浏览器提供了一个原生的Text构造函数, 它返回一个文本节点实例 // 空字符串 var ...
  • Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Refs 使用场景在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一...
  • 例如,需要获取,1年前项目发起这个文本内容。 首先,我们这个是通过selenium定位标签的,然后需要提取内容,虽然是同样是通过xpath定位的,但是提取文档时,却并不能直接使用xpath中的text()或者string()方法来...
  • 用ajax函数读取xml,然后解析XML.html,ajax无刷新读取文件,先使用jQuery加载XML,然后建立一个代码片段,遍历所有student节点获取id节点获取节点文本获取student下的email属性,构造HTML字符串,通过append...
  • 文章目录HTML DOM Element 对象HTML DOM 节点Element 对象Node Types节点类型 - 返回值HTML DOM querySelector() 方法语法参数值真实dom转换成虚拟dom思路注意点:文本节点的判断和节点文本的获取完整代码 ...
  • 节点列表由 getElementsByTagName() 方法和 childNodes 属性返回。 实例 下面的例子使用 XML 文件 books.xml。 函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。 从第一个 元素获取文本 本例...
  • 解析网页的两种方法1.1、使用正则表达式查找网页内容中的title内容1.2、使用Xpath解析网页1.2.1、Xpath常用表达式1.2.2、使用表达式定位head和title节点1.2.3、Xpath谓语常用的表达式1.2.4、使用谓语定位head和ul...
  • DOM知识总结

    2021-02-24 18:45:12
    获取生效的样式2.1 window.getComputedStyle()2.2 currentStyle2.3 自定义获取样式的函数DOM节点操作创建元素节点创建文本节点插入文档中删除节点 DOM 什么是DOM DOM: document object model 文档对象模
  • 如何自己动手写一个jQuery的API 1.关于jQuery ...实现一个获取节点的API,并且拥有添加类名的方法,添加文本方法获取除自己的兄弟节点。 3.封装函数 3.1 获取节点 function(nodeOrSelector){ let nodes...
  • jQuery的DOM操作

    2019-02-27 10:38:37
    首先用工厂函数$()来创建节点(同时可以加入节点文本内容和属性内容),再用append()把创建的节点加 到页面中去; 3.插入节点方法 append() 向匹配元素加入节点 $(A).append(B)把B加到A中 appe...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 192
精华内容 76
关键字:

文本节点获取方法函数