js 关于dom

可编辑的div

// 加上contenteditable="true"即可，需要注意的是内部添加的子元素默认也可编辑
<div contenteditable="true" class="edit"></div>

<script>

var div = document.querySelector(".edit");

// 创建一个MutationObserver实例
var observer = new MutationObserver(this.divcontentchange);
// 开始监听盒子的变化
observer.observe(div, {
  characterData: true, // 监听字符数据变化
  childList: true, // 监听子节点变化
  subtree: true // 监听子树的变化
});

//盒子内容变化
divcontentchange(mutations) {
  mutations.forEach(function (mutation) {
    console.log("盒子内容发生了变化！", mutation);
    console.log("新的内容是：" + mutation.target.textContent);
  });
}

</script>

div设置光标位置

<div contenteditable="true" id="editor"></div>

<script>
  let editor = document.getElementById('editor');

  // 将光标设置到开头
  editor.focus();
  let range = document.createRange();
  range.selectNodeContents(editor);
  range.collapse(true);
  let sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  
  // 将光标设置到结尾
  editor.focus();
  range = document.createRange();
  range.selectNodeContents(editor);
  range.collapse(false);
  sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);

  // 将光标设置到指定位置
  editor.focus();
  range = document.createRange();
  range.setStart(editor.childNodes[3], 5); 
  range.collapse(true);
  sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
</script>

js 创建dom

        var myDiv = document.querySelector(".edit");
        //创建dom
        var newspan = document.createElement("span"); 
        //添加标签属性
        newspan.setAttribute("contenteditable", false);
        //添加类名
        newspan.className = “classname”;
        //添加内容
        newspan.innerText = treeItem.treealias;
        //添加节点
        myDiv.appendChild(newspan);

        // 获取myDiv下所有子元素
        var childElements = myDiv.children;
        //获取父元素下最后一个子元素
        var lastChildElement = myDiv.lastElementChild;
        //删除指定子元素
        myDiv.removeChild(lastChildElement);

获取盒子样式属性

<input class="input" style="top: 0;left: 7px" v-model="text" autofocus ref="input" type="text" ></input>

<script>
      //这里必须是行内样式才能获取到
      //提前写了绝对定位，这里演示改变left值
      let input = this.$refs.input;
      let top = input.style.getPropertyValue("top"); //获取样式属性top
      let left = input.style.getPropertyValue("left"); //获取样式属性left
      let left_i = left.indexOf("p");
      let left_num = parseInt(left.slice(0, left_i)); //处理成数值
      input.style.left = left_num + offset + "px";

</script>