js中dom基础及操作dom
Posted 大C文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中dom基础及操作dom相关的知识，希望对你有一定的参考价值。
dom基础认识
1.dom节点
1）children,获取的是所有的孩子节点，获取的是数组
2）parentNode,获取的是父节点，获取的是对象
2.dom操作方法
1）appendChild(),把节点添加到父节点后面，添加的节点是排在最后
2）insertBefore()，把节点添加到父节点的哪个位置之前
3）removeChild(),删除节点
下面一一通过代码来讲解，更加容易理解它们的含义
<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } #tab{ margin-left:-3px; float:left; width:60px; //height:20px; background:#ccc; text-align:center; } #tab #div-tab{ border:1px solid #999; } #tab ul{ overflow:hidden; background:blue; } #tab ul li{ list-style:none; } </style> <script> window.onload=function(){ var oTab=document.getElementById(\'tab\') //获取对象 var oUl=document.getElementsByTagName(\'ul\')[0];//获取ul标签对象 var oLl=document.getElementsByTagName(\'li\')[0];//获取第一个li对象 alert(oUl.children.length) //获取到ul下孩子节点li，弹出数组的长度为4 alert(typeof oLl.parentNode) //获取到li父节点ul，弹出的是object，对象 oLi=document.createElement(\'li\') //创建li节点 var node=document.createTextNode("5");//创建节点内容 oLi.appendChild(node) //把内容添加到li节点 oUl.appendChild(oLi) //再把创建的li节点，添加到ul下，默认排在最后 oDiv=document.createElement(\'div\') //创建div节点 var node1=document.createTextNode("tab2"); //创建节点内容 oDiv.appendChild(node1) //把内容添加到新建的div节点 oTab.insertBefore(oDiv,oUl) //把创建的div添加到tab下，位置在ul之前 //oTab.removeChild(oDiv) //删除新建的div节点 } </script> <body> <div id="tab"> <div id="div-tab">tab1</div> <ul > <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
效果图
以上是关于js中dom基础及操作dom的主要内容，如果未能解决你的问题，请参考以下文章
基于JS的DOM 编程基础和Json语法及JS下的AJAX基础