javascript -元素，节点总结

第一节：创建元素的三种方式

- document.write();

直接将内容写入页面内容流。但是文档流执行完毕，会导致页面重绘。

<input type="button" name="" value="添加内容" />
<script>
	   var btn = document.querySelector('input');
	   btn.onclick = function() {
	         document.write('<div>是的，我被覆盖了</div>');
	   }
</script>

- element.innerHtml();//将内容写入某个DOM节点，页面内容不会重绘

- document.createElement();//创建多个元素效率低点，但是结构清晰。

第二节：DOM操作总结

增加

var li = document.createElement(“li”) ;

element.appendChild(li)；

添加一个元素在指定子元素之前

ul.insertBefore(li, ul.children[0]); ul父级节点

删除

node.removeChild()     node节点中删除一个子节点

修改

-修改元素属性：src,href,title

- 修改普通元素内容：innerHtml，innerText

- 修改表达元素内容：value，type，disabled

- 修改元素样式：style，className

获取元素

- DOM提供的API：getElementById,getElementsByTagName(不推荐使用)

- H5提供的方法：querySelector，querySelectorAll

- 利用节点获取元素：父级（parentNode）,子级(children)、兄（previousElementSibling，

nextElementSibling）。

属性操作

应用于自定义属性。

- setAttribute：设置dom的属性值

- getAttribute：得到dom的属性值

- removeAttribute：移除属性值