dom

方法一 appendchild , node接口

//建立node的两种方法.
document.createElement('p');
para.textContent = 'We hope you enjoyed the ride.';
//第二种方法
document.createTextNode(' — the premier source for web .');

//直接可以把儿子弄上去.
sect.appendChild(para);

方法二 innerHTML, 他比appandchild要慢. element接口

	node.innerHTML = "<p>we hope you nejoyed</p>";

方法三 execCommand

document.execCommand('insertText', false, '\t\t\t'); //很神奇这里必须用转义符号, 直接贴入一个tab是不行的, 会自动当做空格处理.

方法四 insertbefore node接口

// Create a new, plain <span> element
var sp1 = document.createElement("span");

// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("childElement");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;

// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);

方法五 Range.insertNode() 是在Range的起始位置插入节点的方法。

range = document.createRange();
newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);

方法六 insertadjacentHTML element接口

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

方法七element.append, 这个可以批量塞入多个各种元素, 可以是字符串(appandchild要去只能塞入一个node).

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

方法八 document.write 这个不合适, 因为他替换了整个dom.

 document.write("<h1>Main title</h1>")
dom的辅助方法

documentfragment可以弄一个临时的切片. 可以理解为另一个document, 更轻的没有爸爸的document.

  • https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
  • 使用这个可以几乎完全避免使用innerhtml
  • 它很快, 官方数据比innerhtml快2700倍.
  • 并且它不会增加dom层次.
var fragment = document.createDocumentFragment();

while (i < 200) {
    el = document.createElement('li');
    el.innerText = 'This is my list item number ' + i;
    fragment.appendChild(el);
i++; }

div.appendChild(fragment);
  • https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments

parentnode是另一个非常有用的接口. 可以理解为有node儿子的node爸爸们.

  • https://developer.mozilla.org/en-US/docs/Web/API/ParentNode
光标
start = doc.caretRangeFromPoint(startX, startY);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
range.insertNode(img);


//可以用这个模拟 caretRangeFromPoint
var range = document.createRange();
range.setStart(node, 0);
range.setEnd(node, 1);


//在input里面设置光标
text.focus()  //这个很关键, 如果没有这个那么下面的内容不生效.
text.selectionStart=10
text.selectionEnd=20
text.focus()  //这个写在这里也可以的.
参考文档
  • mdn的dom举例: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples
  • 插入到第一个位置的各种写法: https://stackoverflow.com/questions/2007357/how-to-set-dom-element-as-the-first-child
  • dom处理过程: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  • 光标的样例代码: https://gist.github.com/michelcmorel/6725279
  • 在editable里面的光标处插入文本: https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html