标签归档:DOM对象

javascript之DOM中insertRow()方法有哪些用途呢?


摘要:
下文讲述javascript中insertRow的方法功能说明,如下所示;

insertRow()方法功能:
      用于向表格中的指定位置插入一个新行

insertRow()方法语法:
     tableObject.insertRow(index)
     ------参数说明-----
      index:新行被插入index行之前
       
     ------函数返回值-----
      返回一个 TableRow
       为新插入的行 

     ------注意事项----
     1.表格行从0开始计数
     2.当index等于表格行数时,则新增行会加入末尾
     3.当index小于0或大于表行数时,则会抛出相应的异常信息

例:
html中使用Javascript 之 insertRow插入行的示例分享

 
   <script>
function insRow()
  {
  document.getElementById('tb1').insertRow(0)
  }
</script>
<meta charset='utf-8' />
<p>
maomao365.com
 <br />
insertRow行数示例分享
</p>
<hr />

<table id="tb1" border="1">
<tr>
<td>行1 -列1</td>
<td>行1 -列2</td>
</tr>
<tr>
<td>行2 -列1</td>
<td>行2 -列2</td>
</tr></tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="插入行"> 

HTML DOM对象之toggle()方法功能简介说明


摘要:
下文讲述DOM对象中toggle方法的功能简介说明,如下所示:


toggle方法的功能

toggle()方法功能:
此方法用于移除元素中的样式信息

domObject.classList.toggle(class, bool)
—–参数说明—-
domObject:待操作的html元素
class:待删除的样式信息
bool:当此参数值为true时,则添加样式,
当此参数值为flase时,则删除样式信息
当此参数值省略时,系统自动切换样式信息(如存在,则删除,如不存在,则添加样式)
toggle方法注意事项:
1.此方法是html5新增的一个方法,目前支持IE10、edge、chrome、火狐、opera、safria浏览器
2.此方法
toggle(class,true) –其效果等同于 add(class)
toggle(class,false) –其效果等同于 remove(class)


toggle方法的举例说明

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.maomao365.com/" />  
<title>猫猫教程(www.maomao365.com)
-toggle方法演示说明
</title> 
<style>
.one{
  width:180px;
  height:80px;
} 
.two{
  text-align:center;
  line-height:80px;
}
.three{
  background-color:green;
  color:white;font-weight:bold;

}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("container");
  let obt=document.getElementById("btn");
  obt.onclick=function(){
    odiv.classList.toggle("one");
  }
}
</script>  
</head>  
<body>  
<div id="container" class="one two three">猫猫教程</div>
<input type="button" id="btn" value="toggle方法演示"/>
</body>  
</html>
javascript DOM toggle样式自动切换的方法举例

javascript DOM toggle样式自动切换的方法举例

html DOM对象之document.write()方法简介说明


摘要:
下文通过三个实例讲述document.write()的功能简介说明,如下所示:


document.write()的功能及语法说明:

document.write()的功能:
向文档中写入一个或多个字符串

document.write()语法:
document.write(exp1,exp2,exp3,….expN)
———参数说明——-
exp1,exp2,exp3,….expN
向文档写入的多个字符串信息

例:1


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>
<script> 
document.write("document.write测试");
</script> 
</head> 
<body> 
 ****************
</body> 
</html>

上述html会向文档中写入“document.write测试”,并替换“****************”
例:2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>

</head> 
<body> 
 ****************
</body> 
<script> 
document.write("document.write测试");
</script> 
</html>
 

上述html会向文档中写入“document.write测试”,但是是追加在“****************”字符串后面,
那到底是什么原因导致这个现象出现呢?
例3:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>

</head> 
<body> 
 ****************
</body> 
<script> 
  window.onload=function(){
  document.write("document.write测试");
  }
</script> 
</html>
 

上述html会向文档中写入“document.write测试”,并替换“****************”

例2和例3的代码不同之处,例3中 将document.write加入到window.onload 中
分析 例2和例3的运行效果不同,我们可以从document.write的运行机制上着手
document.write运行时,会隐式的调用document.open方法,
document.open将创建一个文档流,然后覆盖原有的内容
————————-
例2:
由于调用document.write时,文档还未close,此时无需调用document.open方法,所以document.write会写入到当前文档的后面
例3:
将document.write放在window.onload方法中,此时文档流已经close了,所以需重新document.open文档流,原文档中的内容会被重新覆盖,所以出现了两种不同效果