原生JS DOM操作方法

JavaScript016

原生JS DOM操作方法,第1张

1. document.createElement(tagname)

2. document.createTextNode(data)

3.document.createDocumentFragment()

1. Node.parentNode

2. Node.parentElement

3. Node.childNodes

4. Node.children

5. Node.nextSibling

6.Node.nextElementSibling

7. Node.previousSibling

8.Node.previousElementSibling

9.Node.firstChild

10. Node.firstElementChild

11. Node.lastChild

12. Node.lastElementChild

1. Node.appendChild()

2. Node.removeChild()

3. Node.insertBefore()

4. Node.replaceChild()

1. element.setAttribute(name /*属性名*/, value /*属性值*/)

2. element.removeAttribute(attrName /*要删除的属性名*/)

3. element.getAttribute(attrName)

4. element.hasAttribute(attrName)

Ballonload = function () { var btn = document.querySelector ("input[type=button]")var table = btn.parentElement.parentElement.parentElementalert (table.outerHTML)}

1、javascript 获取 Dom 树比较简单。直接获取document 文档对象就可以了，或者也可以直接从具体的控件对象进行获取。

2、比较困难的是如何获取之前旧的dom 树对象。常见的思路是可以设置一个全局的数组变量保存之前的dom树对象，注意此对象保存的只是引用，你做变更，之前保存的对象也是变的，因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象，也就是所谓的深拷贝对象，这个是有点复杂度的，节点如果复杂的话，容易出现问题，要注意处理。

3、希望对你有帮助。