JavaScript DOM 学习总结(五)

2024-12-01 16:35:18

1、DOM简介。

　　当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构，即节点树。通过DOM，JS可创建动态的HTML，可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式，并对页面中所有事件做出响应。所以学习JS的起点就是处理网页，处理网页就需要使用DOM进行操作。

2、DOM获取元素。

　　JS要想操作HTML元素，那么首先就必须先找到该元素。通常使用以下几种方法完成：

　　通过元素设置的id找到HTML元素。

　　通过标签名找到HTML元素。

　　通过元素设置的名称(name)找到HTML元素。

　　所谓的DOM，实际上就是document，获取元素就是操作document。

　　(1)、通过id找到元素

　　方法：document.getElementById('id');

　　网页是由标签将信息组合起来的，id属性值是唯一的，就像身份证一样，通过一个身份证可以找到相对应的人，所以通过该方法，可以获取到与之相对应的标签，而获取的元素在JS中是一个对象，若想对元素进行操作，则需要通过他的属性或方法。

　　(2)、通过标签名找到元素

　　方法：document.getElementsByTagName('Tagname');

　　通过该方法，返回的是带有指定标签名的对象的集合，也就是以数组的形式返回，返回的顺序是他们在文档中的顺序。

　　(3)、通过name找到元素

　　方法：document.getElementsByName('name');

　　该方法与getElementById()方法有点相似，都是通过设置的属性值找到元素，只不过该方法是通过设置的name属性值查找元素。name属性在文档中可能不唯一，所以该方法返回的也是元素的数组，而不是一个元素。

<body>
 <input name="txt" type="text" value="">
 <input name="txt" type="text" value=""><br>
 <input name="txt" type="text" value="">
 <input name="txt" type="text" value=""><br>
 <input name="txt" type="text" value="">
 <input name="aaa" type="text" value="">
 <script>
 //获取所有name值为txt的元素
 var oTxt=document.getElementsByName("txt");
 //获取元素的个数
 alert(oTxt.length);    //返回：
 //获取第二个元素的值
 alert(oTxt[].value);  //返回：
 </script>
 </body>

　　既然可以通过id找到元素，那么也就可以通过class找到元素。className属性用于设置或者返回元素的class类名。

　　语法：object.className = 'className'

　　该方法可以控制class类名，返回元素的class属性，作用是可以为网页中某个元素指定一个className来更改该元素的外观。

　　实例：简单的网页换肤效果

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>网页换肤</title>
 <style>
 body{
   background:lightgreen;
 }
 .col{
   background:lightgray;
 }
 .col{
   background:lightblue;
 }
 .col{
   background:violet;
 }
 .col{
   background:pink;
 }
 .col{
   background:#f;
 }
 </style>
 </head>
 <body id="boy">
 点击切换：<input type="button" value="灰色" onclick="gr()">
 <input type="button" value="蓝色" onclick="bl()">
 <input type="button" value="紫色" onclick="vi()">
 <input type="button" value="粉色" onclick="pi()">
 <input type="button" value="橘色" onclick="or()">
 <script>
 var x = document.getElementById('boy');
 function gr(){
   x.className='col';
 }
 function bl(){
   x.className='col';
 }
 function vi(){
   x.className='col';
 }
 function pi(){
   x.className='col';
 }
 function or(){
   x.className='col';
 }
 </script>
 </body>
 </html>

　　这只是一个简单的切换背景色效果，如果想切换网页的整体样式，可以使用外部CSS文件，通过JS改变link标签的href属性来完成。

　　如果想设置多个class类名相同的元素的样式，就需要借助数组的方法来完成，其实现原理也很简单，首先通过id获取其父元素，再获取父元素下所有子元素的标签名，获取标签名返回的是元素的数组，所以就可以和访问数组一样的方法来访问元素的数组，那么先使用循环遍历该元素数组，再做判断，如果这个元素的className等于我们设置的class属性值，就说明这是我们要找的元素。

　　实例：将有序列表中所有class属性值为"col"的元素背景颜色设置为绿色。

 <body>
 <ol id="o">
   <li>热点</li>
   <li class="col">美食</li>
   <li>数码</li>
   <li class="col">科技</li>
   <li>社会</li>
   <li class="col">养生</li>
 </ol>
 <script>
 //通过id获取父元素
 var aOl = document.getElementById('o');
 //通过标签名获取父元素下所有子元素
 var oLi = aOl.getElementsByTagName('li');
 //循环遍历返回的子元素数组
 for(var i=;i<oLi.length;i++){
   //如果当前子元素的className等于设置的class属性值，则将其背景设置为绿色
   if(oLi[i].className=='col') oLi[i].style.background='green';
 }
 </script>
 </body>

　　下面是一个通过class属性值获取元素的封装函数，方便以后使用。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>封装getByClass函数</title>
 <script>
  //第一个参数为获取的父元素，第二个参数为class属性值。
  function getByClass(oParent,aClass){
   //空数组可以把找到的所有className都存放在里边，最后返回。
   var aResult=[];
   //通过标签名获取父元素下所有子元素。标签名不固定，所以设置为*，便于传入。
   var aEle=oParent.getElementsByTagName('*');
   //循环遍历返回的子元素数组
   for(var i=;i<aEle.length;i++){
     //如果当前子元素的className等于传入的class属性值，则将其添加到数值中。
     if(aEle[i].className==aClass) aResult.push(aEle[i]);
   }
   //最后将这个数组返回
   return aResult;
 }
 </script>
 </head>
 <body>
 <ol id="o">
   <li>热点</li>
   <li class="col">美食</li>
   <li>数码</li>
   <li class="col">科技</li>
   <li>社会</li>
   <li class="col">养生</li>
 </ol>
 <script>
 //封装函数的使用：
 //先通过id获取父元素
 var aOl=document.getElementById('o');
 //再调用封装好的函数传入参数，获取的父元素，子元素的class属性值
 var oCol=getByClass(aOl,'col');
 //最后循环遍历，设置样式
 for(var i=;i<oCol.length;i++){
   oCol[i].style.background='green';
 }
 </script>
 </body>
 </html>

3、DOM操作。

　　获取到HTML元素之后，就可以进行相应的操作。

　　(1)、改变HTML

　　修改HTML内容的最简单的方法时使用 innerHTML 属性。innerHTML顾名思义，inner就是内部的，既然是HTML，那么就可以给里边放HTML。该属性可用于获取和替换HTML元素的内容。

　　语法：document.getElementById(id).innerHTML = new HTML

<body>
 <h id="tit">原标题</h>
 <script>
 //改变原有标题
 var aH=document.getElementById('tit');
 aH.innerHTML='新标题';
 </script>
 <div id="div" style="width:px;height:px;border:px solid black;"></div>
 <script>
 //创建HTML内容
 var oDiv=document.getElementById('div');
 oDiv.innerHTML='<h>我是h标题</h><p>我是一个段落</p>';
 </script>
 </body>

　　(2)、操作元素属性

　　修改元素属性最简单的方法就是直接修改，语法：document.getElementById(id).属性名 = new value　比如修改图片src属性的指向路径。

　　此外还可以通过DOM方法获取、添加、删除元素的属性。

　　①、getAttribute()

　　getAttribute()方法通过元素节点的属性名获取属性的值。

　　语法：elementNode.getAttribute(name)　　name是想要获取的元素节点的属性名

　　②、setAttribute()

　　setAttribute()方法添加一个新属性并指定值，或者把一个现有的属性设定为指定的值。

　　语法：elementNode.setAttribute(name,value)　　name是属性名，value是属性值。

　　③、removeAttribute()

　　removeAttribute()方法可删除元素的属性。

　　语法：elementNode.removeAttribute(name)　　name是属性名。

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 </head>
 <body>
 <input id="txt" type="text">
 <input id="btn" type="button" value="按钮">
 <script>
 var oTxt=document.getElementById('txt');
 var oBtn=document.getElementById('btn');
 //获取按钮value属性的值
 var a=oBtn.getAttribute('value');
 alert(a);  //返回：按钮
 oBtn.onclick=function (){
   //操作元素属性有三种方法：
   //第一种方法
   //oTxt.value='请输入文字';
   //第二种方法
   //oTxt['value']='请输入文字';
   //第三种方法
   //修改文本框value属性的值
   oTxt.setAttribute('value','请输入文字');
   //删除按钮type属性
   oBtn.removeAttribute('type');
   //删除后默认为文本框
 };
 </script>
 </body>
 </html>

　　(3)、改变CSS

　　改变HTML元素的CSS样式可直接使用该语法：document.getElementById(id).style.样式名 = new style

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <style>
 #div{
   height:px;
   width:px;
   border:px solid black;
   padding:px;
 }
 p{
   line-height:px;
   text-indent:em;
 }
 </style>
 </head>
 <body>
 <h>HTML DOM</h>
 <div id="div">
   <h>JS可以使网页添加动态效果并实现与用户交互的功能。</h>
   <p>. JS能够改变页面中所有的 HTML 元素。</p>
   <p>. JS能够改变页面中所有的 HTML 属性。</p>
   <p>. JS能够改变页面中所有的 HTML 元素的CSS样式。</p>
 </div>
 <input type="button" value="改变颜色" onclick="color()">
 <input type="button" value="改变宽高" onclick="hig()">
 <input type="button" value="隐藏内容" onclick="none()">
 <input type="button" value="显示内容" onclick="block()">
 <input type="button" value="取消设置" onclick="cancel()">
 <script>
 var oDiv = document.getElementById('div');
 function color(){
   oDiv.style.color = 'white';
   oDiv.style.fontFamily = 'Microsoft YaHei';
   oDiv.style.backgroundColor = 'green';
 }
 function hig(){
   oDiv.style.width = 'px';
   oDiv.style.height = 'px';
   oDiv.style.border = 'px solid #ccc';
 }
 function none(){
   oDiv.style.display = 'none';
 }
 function block(){
   oDiv.style.display = 'block';
 }
 //取消设置
 function cancel(){
   var clean = confirm('确定取消所有设置？');
   if(clean == true){
     oDiv.removeAttribute('style');
   }
 }
 </script>
 </body>
 </html>

　　上面的代码，通过style设置的样式，都是行间样式，可以使用火狐的Firebug点击相应的按钮，就能看到所有设置的CSS样式都出现在了行间。

　　可以直接通过style获取和设置CSS样式，那么有没有更简洁的方法呢？可以借助于函数使用JS的内置对象arguments完成，所谓arguments，就是可变参，不定参，参数的个数可变，是一个参数数组，无需指出参数名，就可访问他们，但是为了增强可读性，给参数取名，还是很有必要的。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 </head>
 <body>
 <div id="div" style="width:px;height:px;background:red"></div>
 <script>
 //获取行间样式
 function css(){
   //如果传入参数的个数等于
   if(arguments.length==){
     //则返回第二个参数样式名的值
     return arguments[].style[arguments[]];
   }
   else{
     //否则就是设置CSS样式
     //第二个参数样式名的值就等于传入的第三个参数
     arguments[].style[arguments[]]=arguments[];
   }
 }

 var oDiv=document.getElementById('div');
 alert(css(oDiv,'width'));  //获取对象的宽 返回：px
 css(oDiv,'background','green');  //将对象的背景颜色改为绿色
 </script>
 </body>
 </html>

　　下面是一个获取和设置行间样式的封装函数，以便以后使用。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>获取行间样式</title>
 <script>
 function css(obj, name, value){
   if(arguments.length==){
     return obj.style[name];
   }
   else{
     obj.style[name]=value;
   }
 }
 </script>
 </head>
 <body>
 <div id="div" style="width:px;height:px;background:red"></div>
 <script>
 var oDiv=document.getElementById('div');
 alert(css(oDiv,'width'));  //获取div的宽
 css(oDiv,'background','green');  //设置div的背景颜色
 </script>
 </body>
 </html>

　　我们都知道，在实际的WEB项目开发中，要遵循结果、表现、行为相分离的原则，以增强可读性，优化代码，便于后期维护。所以通常我们设置元素的样式，并非都是在行间设置。使用style方法获取的只是DOM元素style属性里的样式规则，对于通过class属性设置的外部样式表，style就显得力不从心了。那要如何获取元素的非行间样式呢？DOM标准中有个全局方法getComputedStyle，通过该方法可以获取当前对象的样式信息。比如：getComputedStyle(obj, false).paddingLeft，可以获取到对象的左内边距。这里需要注意：在获取元素的复合样式时，一定要使用精确的值，复合样式比如background、border，如果要获取元素的背景颜色，只使用background会出错，一定要写成backgroundColor。

　　JS只能修改元素的行间样式，并不能修改获取到的非行间样式。那么很多人可能会产生疑问，既然可以获取到又不能修改，那还获取有什么用。其实获取非行间样式是非常有必要的，如果是外部样式表，样式都是密密麻麻一片英文的存在，不可能一个个去找，到底该元素设置的什么样子，再回头修改，那岂不是太浪费精力了，所以该方法就显得尤为重要，而且返回的值都是精确值，通过获取的非行间样式信息，也有利于更精细的修改元素的当前样式，这是多么美妙的一件事，直接使用style设置元素的行间样式，因为行间样式的优先级最高，所以就覆盖掉了非行间样式，其实也就相当于跟修改了非行间样式一样，只是显示在了行间，我们目的反着是已经达到了。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>获取非行间样式</title>
 <style>
 #div{
   width:px;
   height:px;
   background:red;
   margin-top:px;
 }
 </style>
 <script>
 window.onload=function (){
   var oDiv=document.getElementById('div');
   alert(getComputedStyle(oDiv,false).width);
   oDiv.style.width='px';
   alert(getComputedStyle(oDiv,false).height);
   oDiv.style.height='px';
   //注意这里修改复合样式时，使用的background，可在FF下用Firebug查看具体的行间样式。
   alert(getComputedStyle(oDiv,false).backgroundColor);
   oDiv.style.background='green';
 };
 </script>
 </head>
 <body>
 <div id="div"></div>
 </body>
 </html>

　　(4)、对事件做出响应

　　实例：全选和反选，输入对应的序号选中

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 </head>
 <body>
 <form id="list">
   请选择你的业余爱好:<br>
   . 音乐<input type="checkbox" name="love" id="like">
   . 阅读<input type="checkbox" name="love" id="like">
   . 游泳<input type="checkbox" name="love" id="like">
   . 篮球<input type="checkbox" name="love" id="like">
   . 足球<input type="checkbox" name="love" id="like">
   . 散步<input type="checkbox" name="love" id="like">
   . 泡吧<input type="checkbox" name="love" id="like">
   . 逛街<input type="checkbox" name="love" id="like"><br>
   <input type="button" value = "全选" onclick="optAll()">
   <input type="button" value = "反选" onclick="noAll()">
   <p>输入-序号选择，每次只可以选择一项：</p>
   <input id="txt" type="text">
   <input id="btn" type="button" value="确定">
 </form>
 <script>
 function optAll(){
   //通过获取标签名设置全选
   var oList = document.getElementById('list');
   var aCheck = oList.getElementsByTagName('input');
   for(var i=;i<aCheck.length;i++){
     if(aCheck[i].type =='checkbox'){
       aCheck[i].checked=true;
     }
   }
 }
 function noAll(){
   //通过获取设置的name属性值设置反选
   var aLove = document.getElementsByName('love');
   for(var i=;i<aLove.length;i++){
     if(aLove[i].type =='checkbox'){
       aLove[i].checked=false;
     }
   }
 }
 var oBtn = document.getElementById('btn');
 //给获取的按钮添加点击事件
 oBtn.onclick = function (){
   //获取文本框输入的值
   var oTxt = document.getElementById("txt").value;
   //定义的复选框id值为like-。括号中进行的是字符串连接，id+输入到文本框的值=该元素的id值
   var oLike = document.getElementById('like' + oTxt);
   oLike.checked = true;
 }
 </script>
 </body>
 </html>

3、DOM节点。

　　HTML文档可以说是由节点构成的集合，常见的DOM节点有三种，即元素节点、属性节点和文本节点。元素节点就是HTML标签，标签的属性就是属性节点，文本节点就是页面可以浏览的内容。

　　在文档对象模型中，每一个节点都是一个对象，DOM节点有三个重要的属性：节点的名称，节点的值和节点的类型。

　　(1)、nodeName：节点的名称

　　nodeName属性返回节点的名称。元素节点的名称与标签名相同(大写)，属性节点的名称是属性的名称，文本节点的名称永远都是#text，文档节点的名称永远都是#document。

　　(2)、nodeValue：节点的值

　　nodeValue属性返回节点的值。元素节点的值是undegined或null，属性节点的值是属性的值，文本节点的值是文本自身。

　　(3)、nodeType：节点的类型

　　nodeType属性返回节点的类型。以下是常见的节点类型：

 <body>
 <ul>
   <li>JS</li>
   <li>DOM</li>
 </ul>
 <script>
 var nodes=document.getElementsByTagName('li');
 for(var i=;i<nodes.length;i++){
   document.write('第'+(i+)+'个节点的名称是'+nodes[i].nodeName+'<br>');
   document.write('第'+(i+)+'个节点的值是'+nodes[i].nodeValue+'<br>');
   document.write('第'+(i+)+'个节点的类型是'+nodes[i].nodeType+'<br>');
   document.write('<br>');
 }
 /*
 返回：
 第个节点的名称是LI
 第个节点的值是null
 第个节点的类型是
 第个节点的名称是LI
 第个节点的值是null
 第个节点的类型是
 */
 </script>
 </body>

　　JS中函数可以嵌套使用，有父函数有子函数，HTML标签也可以嵌套使用，那么就说明存在着各种不同的节点关系，比如父节点、子节点和兄弟节点。为了方便操作，DOM定义了一些节点的公共属性。

　　(1)、子节点

　　childNodes属性返回节点的子节点集合，可使用length属性返回子节点的数量，然后就可以和数组一样获取需要的信息。

<body>
 <ul id="u">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
 </ul>
 <script>
 var oUl=document.getElementById('u');
 alert(oUl.childNodes.length);  //返回：
 </script>
 </body>

　　通过上面的代码，可以看到返回的是11。ul下明明只有5个li元素，怎么会返回11呢？其实是这么回事：

<ul id="u">  第个节点（文本节点）
   <li>第个节点（元素节点）</li> 第个节点（文本节点）
   <li>第个节点（元素节点）</li> 第个节点（文本节点）
   <li>第个节点（元素节点）</li> 第个节点（文本节点）
   <li>第个节点（元素节点）</li> 第个节点（文本节点）
   <li>第个节点（元素节点）</li> 第个节点（文本节点）
 </ul>

　　因为通过childNodes属性返回的子节点集合，不仅包括元素节点，而且还包括文本节点，浏览会将标签之间的空白默认为文本节点，在空白处输入文字，会在浏览器显示。所以建议使用children属性，该属性只返回元素节点，不包括文本节点，并且不包括注释节点。

 <body>
 <ul id="u">
   <li>
     我是个文本节点
     <span>我是span元素。</span>
   </li>
   <li></li>  <!-- 注释 -->
   <li></li>
   <li></li>
   <li></li>
 </ul>
 <script>
 var oUl=document.getElementById('u');
 alert(oUl.children.length);  //返回：
 </script>
 </body>

　　上面的代码，ul下5个li元素，返回子节点个数为5。children属性要比childNodes属性好用太多了，只返回元素的子节点，还不包括孙子辈节点。

　　(2)、首尾子节点

　　firstElementChild属性返回children数组的第一个节点。

　　语法：node.firstElementChild　　该方法相当于：element.children[0]

　　lastElementChild属性返回children数组的最后一个节点。

　　语法：node.lastElementChild　　该方法相对于：element.children[element.children.length-1]

<body>
 <div style="border:px solid green" id="div">
   空白节点
  <p>JS</p>
  <div>DOM</div>
  <h>jQuery</h>
 </div>
 <script>
 var x=document.getElementById('div');
 document.write('第一个节点的名称：'+x.firstElementChild.nodeName+'<br>');
 //返回：第一个子节点的名称：P
 document.write('最后一个节点的名称：'+x.lastElementChild.nodeName)
 //返回：最后一个子节点的名称：H
 </script>
 </body>

　　(3)、父节点

　　parentNode属性用于获取指定节点的父节点。注意：父节点只能有一个。通过使用两个获取父节点，可获取祖节点。

　　实例：点击子节点，隐藏父节点

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 </head>
 <body>
 <ul id="u">
   <li>aaa <a href="javascript:;">点击隐藏</a></li>
   <li>bbb <a href="javascript:;">点击隐藏</a></li>
   <li>ccc <a href="javascript:;">点击隐藏</a></li>
   <li>ddd <a href="javascript:;">点击隐藏</a></li>
   <li>eee <a href="javascript:;">点击隐藏</a></li>
 </ul>
 <script>
 var oUl=document.getElementById('u');
 //查看ul元素的父节点
 alert(oUl.parentNode);  //返回：[object HTMLBodyElement]
 //通过标签名获取所有的a元素
 var aA=document.getElementsByTagName('a');
 for(var i=;i<aA.length;i++){
   aA[i].onclick=function (){
     //设置当前节点的父节点为隐藏
     this.parentNode.style.display='none';
   };
 }
 </script>
 </body>
 </html>

　　offsetParent属性可返回一个元素用于定位的父级。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <style>
 #div{
   width:px;
   height:px;
   background:green;
   margin:px;
   /*position:relative;*/
 }
 #div{
   width:px;
   height:px;
   background:red;
   position:absolute;
   left:px;
   top:px;
 }
 </style>
 </head>
 <body>
 <div id="div">
   <div id="div"></div>
 </div>
 <script>
 var oDiv=document.getElementById('div');
 alert(oDiv.offsetParent);
 //返回：[object HTMLBodyElement]
 //div的父级是div,如果取消div相对定位的注释。则返回：[object HTMLDivElement]
 </script>
 </body>
 </html>

　　(3)、兄弟节点

　　nextElementSibling属性返回同一树层级中某个节点之后紧跟的节点。

　　语法：element.nextElementSibling　　

　　previousElementSibling属性返回同一树层级中某个节点之前紧跟的节点。

　　语法：element.previousElementSibling

节点类型	说明	值
元素节点	每一个HTML标签都是一个元素节点，如 <div> 、 <p>、<ul>等	1
属性节点	元素节点（HTML标签）的属性，如 id 、class 、name 等。	2
文本节点	元素节点或属性节点中的文本内容。	3
注释节点	表示文档注释，形式为<!-- text content -->。	8
文档节点	表示整个文档（DOM 树的根节点，即 document ）。	9

　　实例：获取li元素节点的兄弟节点

<body>

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
 </ul>
 <script>
 var aLi=document.getElementsByTagName('li');
 //获取第二个子节点之后紧跟的节点
 var x=aLi[].nextElementSibling;
 alert(x.innerHTML);  //返回：JS
 //获取第二个子节点之前紧跟的节点
 var x=aLi[].previousElementSibling;
 alert(x.innerHTML);  //返回：HTML
 </script>
 </body>

4、DOM应用。

　　DOM最实际的应用就是可以通过JS创建、插入和删除节点。

　　(1)、创建节点

　　createElement()方法可创建元素节点。

　　语法：document.createElement(tagName)

　　appendChild()方法可在指定节点的末尾插入一个新的子节点，每次都向末尾添加。

　　语法：父级.appendChild(new node)

　　实例：创建并添加li元素

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById('btn');
   var oUl=document.getElementById('u');
   var oTxt=document.getElementById('txt');
   //文本框输入提示
   oTxt.placeholder='请输入文字创建li元素';
   oBtn.onclick=function (){
     //创建li元素
     var oLi=document.createElement('li');
     //创建的li元素的HTML=文本框输入的值
     oLi.innerHTML=oTxt.value;
     //插入到oUl父级下，作为子节点，在每个创建的li末尾插入新创建的li元素
     oUl.appendChild(oLi);
     //父级.appendCild(子节点);
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text"value="">
 <input id="btn" type="button"value="创建li">
 <ul id="u"></ul>
 </body>
 </html>

　　(2)、插入节点

　　insertBefore()方法可在已有的子节点前插入一个新的子节点。

　　语法：父级.insertBefore(new node, node)　　第一个参数为要插入的新子节点。第二个参数是原有节点，也就是在谁之前插入。

　　实例：创建并添加li元素，每个新创建的li元素都插入到之前插入的li元素之前

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById('btn');
   var oUl=document.getElementById('u');
   var oTxt=document.getElementById('txt');
   oBtn.onclick=function (){
     //创建li元素
     var oLi=document.createElement('li');
     //获取所有li元素
     var aLi=oUl.getElementsByTagName('li');
     oLi.innerHTML=oTxt.value;

     //这里需要注意：页面中本没有li元素，li元素是通过JS创建的
     //所以第一个li元素应该添加到父级下最后一个子节点
     //然后基于这个节点，将之后再插入的子节点插入到上一个节点之前

     //如果li元素本来不存在，则执行else，在父级插入一个子节点。
     //如果li元素的个数>，说明已经创建了，则插入到这个子节点之前。
     if(aLi.length>){
       oUl.insertBefore(oLi,aLi[]);
     }
     else{
       oUl.appendChild(oLi);
     }
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text" value="">
 <input id="btn" type="button" value="创建li">
 <ul id="u"></ul>
 </body>
 </html>

　　(4)、删除节点

　　removeChild()方法用于删除一个节点

　　语法：父级.removeChild(node)　　参数为要删除的子节点。

　　实例：简单的表格添加和删除

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-">
    <title>JavaScript实例</title>
  <script>
  window.onload=function (){
    var oTab=document.getElementById('tab');
    var oName=document.getElementById('user');
   var oAge=document.getElementById('age');
   var oBtn=document.getElementById('btn');
   //设置添加的ID项的值
   var id=oTab.tBodies[].rows.length+;
   oBtn.onclick=function (){
     //创建一个tr
     var oTr=document.createElement('tr');
     //创建第一个td（ID项）
     var oTd=document.createElement('td');
     //获取ID，已经删除的ID号，不能再重用。
     oTd.innerHTML=id++;
     //将创建的td放入创建的tr中
     oTr.appendChild(oTd);
     //创建第二个td（姓名项）
     var oTd = document.createElement('td');
     oTd.innerHTML=oName.value;
     oTr.appendChild(oTd);
     //创建第三个td（年龄项）
     var oTd = document.createElement('td');
     oTd.innerHTML=oAge.value;
     oTr.appendChild(oTd);
     //创建第四个td（操作项）
     var oTd = document.createElement('td');
     oTd.innerHTML='<a href="javascript:;">删除</a>';
     oTr.appendChild(oTd);
     oTd.getElementsByTagName('a')[].onclick=function (){
       //删除整行
       oTab.tBodies[].removeChild(this.parentNode.parentNode);
     };
     //将创建好的tr放入tbody中
     oTab.tBodies[].appendChild(oTr);
   };
 };
 </script>
 </head>
 <body>
 姓名：<input id="user"type="text">
 年龄：<input id="age"type="text">
 <input id="btn" type="button" value="添加">
 <table id="tab" border="" width="px">
   <caption>员工表</caption>
   <thead>
     <tr>
       <th>ID</th>
       <th>姓名</th>
       <th>年龄</th>
       <th>操作</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td></td>
       <td>小白</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>小明</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>小红</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>张三</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>李四</td>
       <td></td>
       <td></td>
     </tr>
   </tbody>
 </table>
 </body>
 </html>

　　这个实例只能很简单的完成添加和删除，并不对输入进行判断，如果想要做的完美，还需要做很多工作，可以对表格进行美化，设置背景色，鼠标移入高亮显示，鼠标移出恢复背景色，最关键的就是要对表单输入内容进行判断，以确保每次提交的信息都是有效信息，如果表格信息量大，还可以添加支持模糊搜素，多关键字搜索，以提高用户体验度，当然在实际的项目中，这样的情况几乎不会出现，但可以作为自己的实践，检验学习成果。

　　(5)、替换节点和创建文本节点

　　replaceChild()方法可用于替换元素节点。

　　语法：node.replaceChild (new node, node)　　第一个参数为用于替换的节点。第二个参数为原有节点。

　　createTextNode()方法可创建新的文本节点，返回新创建的Text节点。

　　语法：document.createTextNode(txt)

　　这两种方法平时几乎用不到，但还是需要了解。

　　实例：点击按钮将span标签替换为b标签。再创建一个文本节点插入到创建的p元素下，并设置className。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <style>
 .p{
   width:px;
   height:px;
   background-color:#ccc;
 }
 </style>
 </head>
 <body>
 <p>创建一个P标签，设置<span id="s">className</span>属性，创建文本节点。</p>
 <input type="button" value="点击替换" onclick="change()">
 <script>
 function change(){
   //获取span元素
   var oS=document.getElementById('s');
   //创建一个b元素
   var newnode=document.createElement('b');
   //要替换的文本节点
   var txt = document.createTextNode('className');
   //将文本节点插入到创建的b元素下
   newnode.appendChild(txt);
   //在span元素的父级下将span元素替换成新创建的b元素
   oS.parentNode.replaceChild(newnode,oS);
 }
 //创建一个p元素
 var oP=document.createElement('p');
 //设置className
 oP.className='p';
 //创建文本节点
 var txtNode=document.createTextNode('createTextNode用于创建文本节点!');
 //将创建的文本节点插入到p元素下
 oP.appendChild(txtNode);
 //再将p元素插入到父级body下
 document.body.appendChild(oP);
 </script>
 </body>
 </html>

以上所述是我们小编给大家分享的关于JavaScript DOM 学习总结(五)的全部叙述，希望大家喜欢。

基于JavaScript创建动态Dom

动态脚本我们在页面中使用<script>元素就可以向页面中插入javascript代码.有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码.所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本.与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码. 动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码: var script = document.cr
nodejs的10个性能优化技巧

下面是我们使用Node.js时遵循的10个性能规则: 1. 避免使用同步代码在设计上,Node.js是单线程的.为了能让一个单线程处理许多并发的请求,你可以永远不要让线程等待阻塞,同步或长时间运行的操作.Node.js的一个显著特征是:它从上到下的设计和实现都是为了实现异步.这让它非常适合用于事件型程序. 不幸的是,还是有可能会发生同步/阻塞的调用.例如,许多文件系统操作同时拥有同步和异步的版本,比如writeFile和writeFileSync.即使你用代码来控制同步方法,但还是有可能不注意
JS 网站性能优化笔记

1. 除去JavaScript注释除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义. 2. 除去JavaScript中的空白区域如:x = x + 1; 可以简短得写成:x=x+1; . 3. 进行代码优化简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码.一些简略的表达方式也会产生很好的优化,例如: x=x+1; 可以写成: x++; 不过得小心谨慎,不然代码很容易出错. 4
js性能优化如何更快速加载你的JavaScript页面

确保代码尽量简洁不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用
基于JavaScript操作DOM常用的API小结

前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录基本概念节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结文本整
JavaScript 性能优化小结

随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 在J2EE编程中,我们接触最多的脚本语言还是JavaScript.在使用JavaScr
javascript性能优化之事件委托实例详解

本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa
js性能优化技巧

性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议它的最上层是应用层传输层网络层物理层请求信息:请求行请求头空行消息体响应信息:状态行和状态码使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这
javascript性能优化之DOM交互操作实例分析

本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite
简单实现JS对dom操作封装

这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
JavaScript性能优化之小知识总结

随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas
JS性能优化笔记搜索整理

通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

JavaScript DOM 学习总结(五)

相关推荐

随机推荐