爱站程序员基地一. DOM基础
1.定义
HTML DOM即Document Object Model for HTML，通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
2.DOM节点
[code]<body><ul id=\"ul1\"><li><span>fjkgh</span></li><li></li></ul></body> //上面代码：li是ul的子节点，body是ul的父节点
*子节点《==========================================》父节点
*children获取子节点 parentNode获取父节点，offsetParent获取元素用来定位的父级
*首尾节点
firstChild(低版本浏览器）/firstElementChild(高版本浏览器）:获取第一个子节点
lastChild(低版本浏览器）/lastElementChild(高版本浏览器）:获取第一个子节点
3.操作元素属性
方法一： oTxt.value=\’dfhgkhda\’;
方法二： oTxt[\’value\’]=\’jflkjgla\’;
方法三：Dom方式
获取：getAttirbute(名称) 设置：setAttribute(\’名称\’,\’值\’) 删除：removeAttribute(名称)
二.DOM操作
1.创建Dom元素
createElement(标签名）创建一个节点
appendChild(节点）追加一个节点
例子：文本输入后，点击按钮久创建一个内容是输入文本的li
[code]<head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>js的DOM知识</title><script>window.onload =function(){var ouL = document.getElementById(\'ul1\');var tex = document.getElementById(\'tex1\');var oBtn = document.getElementById(\'btn1\');oBtn.onclick=function(){//添加元素var oLi=document.createElement(\'li\');oLi.innerHTML=tex.value;//父级.appendChild(子节点)ouL.appendChild(oLi);};};</script></head><body><input id=\"tex1\" type=\"text\"/><input id=\"btn1\" type=\"button\" value=\"船舰li\"/><ul id=\"ul1\"></ul></body></html>
2.插入元素
insertBefore(节点,原有节点)
例子：倒序插入
[code]<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>js的DOM知识</title><script>window.onload =function(){var ouL = document.getElementById(\'ul1\');var tex = document.getElementById(\'tex1\');var oBtn = document.getElementById(\'btn1\');oBtn.onclick=function(){//添加元素var oLi=document.createElement(\'li\');var aLi=ouL.getElementsByTagName(\'li\');//给li加内容oLi.innerHTML=tex.value;if(aLi.length>0){//父级.insertBefore(节点,原有节点)---->往前面排ouL.insertBefore(oLi,aLi[0]);}else{//父级.appendChild(子节点)---->往后面排ouL.appendChild(oLi);}};};</script></head><body><input id=\"tex1\" type=\"text\"/><input id=\"btn1\" type=\"button\" value=\"船舰li\"/><ul id=\"ul1\"></ul></body></html>
3.删除元素
父级.removeChild(子节点）删除一个节点
例子：点击a标签删除
[code]<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>js的DOM知识</title><script>window.onload =function(){var ouL = document.getElementById(\'ul1\');var oA = document.getElementsByTagName(\'a\');for(var i=0;i<oA.length;i++){oA[i].onclick=function(){ouL.removeChild(this.parentNode);}}};</script></head><body><ul id=\"ul1\"><li>hkghkhjfk <a href=\"javascript:;\">删除</a></li><li>hkghkhjfk <a href=\"javascript:;\">删除</a></li><li>hkghkhjfk <a href=\"javascript:;\">删除</a></li><li>hkghkhjfk <a href=\"javascript:;\">删除</a></li><li>hkghkhjfk <a href=\"javascript:;\">删除</a></li></ul></body></html>
4.文档碎片
文档碎片可以提高DOM操作性能，主要针对低级浏览器，高级浏览器用处不大，
创建文档碎片document.creatDocumentFragment
[code]<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>js的DOM知识</title><script>window.onload =function(){var ouL = document.getElementById(\'ul1\');var oFrag=document.createDocumentFragment();for(var i=0;i<1000;i++){var oLi=document.createElement(\'li\');oFrag.appendChild(oLi);}ouL.appendChild(oFrag);};</script></head><body><ul id=\"ul1\"></ul></body></html>
