兼容js中Element对象的text -＞textContent

问题描述

场景：工作过程中遇到的一个由纯js写的一个web管理项目，数据读取来自于xml文档，生成的数据也写入到xml文档中。 以前使用ie浏览器，现在使用chrome浏览器。
问题：由于ie浏览器中element对象标签内容属性为text,而chrome等浏览器的标签内容属性为textContent.导致浏览器的属性获取不兼容。

解决方案

直接替换

1. 最开始是一个个手工修改，数量太大了且容易出错,不方便。

2. 后想着在vscode中使用正则表达式（\.text[^\w]）进行统一替换，不严谨，容易出错。

自定义一个text属性

通过自定义一个text属性,将原来的textContent属性递归复制到text属性中,解决text读时读不出来的问题

Node.protytype.text;

//兼容text =>> textContent
    var nodeList = xmlDoc.children;
    var length = nodeList.length;
    for(let i = 0;i<length;i++){ //本代码不是递归,只复制了前两层
       for(let j = 0;j<nodeList[i].children.length;j++){
        nodeList[i].children[j].text = nodeList[i].children[j].textContent;
       }
    

bug

1. 这样的做法只在所有的节点创建出来时进行统一的值复制
2. 代码运行过程中只能怪进行数据的读操作，中途的textContent的写操作不会同步到text。

通过数据绑定解决(解决同步的读写问题,推荐)

Element.prototype.text ;
    var test = document.getElementById("test");
    Object.defineProperty(test, "text", {
        get: function () {
            return test.textContent; //读取到的是textContent的值
        },
        set: function (newdata) {
            test.textContent = newdata;//写入到textContent中
        }
    })

解读

1. 为需要修改的对象自定义一个text属性
2. 通过Object.defineProperty对原对象的赋值和取值通过get/set方法进行描述,返回符合逻辑的自定义的值.