JavaScript学习笔记之DOM操作（上）

一. DOM基础
1.定义
HTML DOM即Document Object Model for HTML，通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
2.DOM节点

<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

<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(节点,原有节点)

例子：倒序插入

<!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标签删除

<!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

<!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>