JS-删除节点removeChild()/替换元素节点replaceChild()/创建元素节点createElement/创建文本节点createTextNode/浏览器窗口可视区域大小/网页...

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)
参数:

node ：必需，指定需要删除的节点。

我们来看看下面代码，删除子点。


image.png

运行结果:

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下:


image.png

任务
试一试，定义clearText()函数，完成节点内容的删除。

  1. 删除该节点的内容，先要获取子节点。

  2. 然后使用循环遍历每个子节点。

  3. 使用removeChild()删除节点。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
  
  //法一,一次性清除节点内容
  for(var i=0;i<content.childNodes.length;i++){
      if(content.childNodes[i].nodeType!=1){   
         continue;  
      }else{
         content.removeChild(content.childNodes[i]);    
      }
         
      }

  //法二,一次性清除节点内容
/*   
   for(var i=content.childNodes.length-1;i>=0;i--){
      var chnode=content.childNodes[i];
      content.removeChild(chnode);  
   }
*/ 

  //法三,多次方清除节点内容
/*
   for(var i=0;i<content.childNodes.length;i++){
    var chnode=content.childNodes[i];
    content.removeChild(chnode);  
  }
*/
 
  }
 
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )
参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

我们来看看下面的代码:


image.png

效果: 将文档中的 Java 改为 JavaScript。

注意:

  1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。

  2. newnode 必须先被建立。

任务
试一试，补充函数 replaceMessage() 代码，实现将 b 标签替换成 i 标签。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>


  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
  
    <script type="text/javascript">
      function replaceMessage(){
        var oldnode=document.getElementById("oldnode");
        var newnode=document.createElement("i");
        newnode.innerHTML=oldnode.innerHTML
        oldnode.parentNode.replaceChild(newnode,oldnode);
           
       }    
  </script>
  
 </body>
</html>

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

我们来创建一个按钮，代码如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>

效果：在HTML文档中，创建一个按钮。

我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。

任务
试一试，实现在HTML文档中创建一个链接，并设置相应属性。

  1. 在右边编辑器补充代码，完善createa(url,text)创建链接函数，参数1为链接地址，参数2为链接文本。函数中添加链接地址、文本、文字颜色属性。

  2. 调用createa函数，链接地址 http://www.imooc.com，文本为:慕课网

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
    var a=document.createElement("a");
    a.href=url;
    a.innerHTML=text;
    a.style.color="red";
    main.appendChild(a);
}
// 调用函数创建链接
    createa("http://www.imooc.com","慕课网");

</script> 
</body>
</html>

创建文本节点createTextNode

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

语法：

document.createTextNode(data)
参数：

data : 字符串值，可规定此节点的文本。

我们来创建一个<div>元素并向其中添加一条消息，代码如下：


[图片上传中...(image.png-fe463e-1560836634371-0)]

image.png

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度

• window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的<body>标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

任务
在script标签内，补充右边编辑器代码，获取浏览器当前窗口大小。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w=document.documentElement.clientWidth||document.body.clientWidth;
var h=document.documentElement.clientHeight||document.body.clientHeight;
document.write(w+"*"+h+"<br>")

var w=document.documentElement.clientHeight;
var h=document.documentElement.clientWidth;
document.write(w+"*"+h+"<br>")

var w=window.innerWidth;
var h=window.innerHeight;
document.write(w+"*"+h+"<br>")

var w=document.body.clientWidth;
var h=document.body.clientHeight;
document.write(w+"*"+h)
</script>
</body> 
</html>

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

任务
在script标签内，补充右边编辑器代码，获取网页的实际宽度和高度。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

</head>
<body>
<script type="text/javascript">
//法一
document.write("///******法一******///"+"<br />");
document.write(document.body.scrollWidth+"<br  />");
document.write(document.body.scrollHeight);

//法二
var w=document.documentElement.scrollWidth;
var h=document.documentElement.scrollHeight;
document.write("<br>"+"///******法二******///"+"<br>"+"宽为："+w+"<br>"+"高为："+h);
</script>
</body>    
</html>

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

任务
在script标签内，补充右边编辑器代码，获取网页的宽度和高度,并输出。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head>
<body>
 <script type="text/javascript">
var w= document.documentElement.offsetWidth;
var h= document.documentElement.offsetHeight;
//法一    
    document.write("方法一"+"<br/>"+"网页内容的宽度为："+w+"<br  />"+"网页内容的高度为："+h);
//法二
   document.write("<br />"+"方法二"+"<br/>");
   document.write("网页内容的宽度为："+document.body.offsetWidth+"<br  />");
   document.write("网页内容的高度为："+document.body.offsetHeight);
</script>
</body>
</html>

网页卷去的距离与偏移量

image.png

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

  1. 区分大小写

  2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

任务
在右边编辑器中，调整横竖滚动条后，点击按钮后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的变化。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function req(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
     }
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
    <div style="width:60%;border-right:3px dashed blue;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px blue solid;height:300px;width:200px;overflow:auto">
                <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
            </div>
            <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 55px;"/>
        </div>
        
    </div>
    <div style="width:35%;height:65px;float:right;">
        <ul style="list-style-type: none; line-height:38px;ss">结果：
            <li>offsetTop : <span id="li1"></span></li>
            <li>offsetLeft : <span id="li2"></span></li>
            <li> scrollTop : <span id="li3"></span></li>
            <li>scrollLeft : <span id="li4"></span></li>
            <li>总结：offsetLeft与offsetTop的值是相对不变的。<span id="lix"></span></li>
        </ul>
        
    </div>
    <div style="clear:both;"></div>    
</body>
</html>

编程练习

制作一个表格，显示班级的学生信息。

要求：

  1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

  2. 点击添加按钮，能动态在最后添加一行

  3. 点击删除按钮，则删除当前行

任务
第一步： 首先，我们创建删除函数，并在删除按钮上添加点击事件；

提示: 使用removeChild()。
第二步： 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

提示: 使用createElement()、innerHTML、appendChild()。
第三步： 更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

提示:

  1. 获取表格的行，getElementsByTagName 。
  2. 使用for进行循环，为每行添加事件及背景颜色设置。
<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  
     window.onload = function(){
        Highlight();
     }  
     function addOne(obj){ 
        var tbody = document.getElementById('table').lastChild;  
        var tr = document.createElement('tr');  
         
         var td = document.createElement("td");
         td.innerHTML = "<input type='text'/>";
         tr.appendChild(td);
         
         td = document.createElement("td");  
         td.innerHTML = "<input type='text'/>";
         tr.appendChild(td);
         
         td = document.createElement("td"); 
         td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";
         tr.appendChild(td);   
         
         tbody.appendChild(tr);   
        Highlight();
     }

     function deleteRow(obj){
        var tbody = document.getElementById('table').lastChild;  
        var tr = obj.parentNode.parentNode;
         tbody.removeChild(tr);
     }
     function Highlight(){
        var tbody = document.getElementById('table').lastChild; 
        trs = tbody.getElementsByTagName('tr');   
        for(var i =1;i<trs.length;i++){
            trs[i].onmouseover = function(){
                this.style.backgroundColor ="#f2f2f2";
            } 
            trs[i].onmouseout = function(){
                this.style.backgroundColor ="#fff";
            } 
        }  
     }

  </script> 
 </head> 
 <body> 
       <table border="1" width="50%" id="table">
       <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
       </tr>  

       <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>  

       </table>
       <input type="button" value="添加一行" onclick="addOne()" />
 </body>
</html>
image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,176评论 5赞 469
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,190评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,232评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,953评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,879评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,177评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,626评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,295评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,436评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,096评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,685评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2赞 341

推荐阅读更多精彩内容

  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,749评论 0赞 8
  • DOM对象，控制HTML元素
    认识DOM文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。D...
    jasmine_jing阅读 758评论 0赞 3
  • 2018-09-29 JS
    向上取整ceil() ceil() 方法可对一个数进行向上取整。 向下取整floor() floor() 方法可对...
    小挠许阅读 258评论 0赞 0
  • DOM节点对象的操作
    认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。...
    深沉的简单阅读 894评论 0赞 2
  • 1
    123
    夜雨_8c56阅读 128评论 0赞 0