[JavaScript基础]学习⑨---dom对象、网页尺寸

文档对象模型DOM（Document Object Model）

定义访问和处理HTML文档的标准方法

DOM节点:

元素节点：< html >、< body >、< p >等都是元素节点，即标签。
文本节点:如< li >...< /li >中的JavaScript、DOM、CSS等文本。
属性节点:元素属性，< a >标签的链接属性href。

节点属性

Paste_Image.png

遍历节点树

Paste_Image.png

DOM操作

Paste_Image.png
var mychar = document.getElementById("con");  
mychar.style.color="red";
mychar.style.backgroundColor ="#ccc";
mychar.style.display="none";

getElementsByName()

返回的是元素的数组

var mynode=document.getElementsByName("myt");  
alert(mynode.length);

getElementsByTagName()

Paste_Image.png

区别

Paste_Image.png
 var hobby = document.getElementsByTagName("input");
          for(i=0;i<hobby.length;i++){
              hobby[i].checked=true;    
  }

var hobby=document.getElementById("hobby"+j);
hobby.checked=true;

getAttribute()方法

elementNode.getAttribute(name)
Paste_Image.png
var con=document.getElementsByTagName("li");
  for (var i=0; i< con.length;i++){
    var text=con[i].getAttribute('title');
    if(text!=null)
    {
      document.write(text+"<br>");
    }
}

setAttribute()

elementNode.setAttribute(name,value)

如果不存在具有指定名称的属性，该方法将创建一个新属性。

var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
  var text=Lists[i].getAttribute('title');
  document.write(text +"<br>");
  if(text=="")
  {
  Lists[i].setAttribute('title','test');
  document.write(Lists[i].getAttribute("title")+"<br>");
  }
}

节点属性

DOM 节点有三个重要的属性 ：

nodeName : 节点的名称

nodeValue ：节点的值

nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

var lis=document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    document.write(lis[i].nodeName+"   ");
    document.write(lis[i].nodeValue+"   ");
    document.write(lis[i].nodeType+'<br/>')
}

LI null 1
LI null 1
LI null 1

childNodes

elementNode.childNodes

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

Paste_Image.png

IE:

UL子节点个数:3
节点类型:1

其它浏览器:

UL子节点个数:7
节点类型:3

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

Paste_Image.png

修改

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
  javascript  
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
 var div=document.getElementsByTagName('div')[0];
 var divs=div.childNodes;
 for(i=0;i<divs.length;i++){
     document.write(divs[i].nodeName+'   '+divs[i].nodeType+"   
"+divs[i].nodeValue+'<br/>');
 }
 
 
</script>
</body>
</html>

javascript
javascript

jQuery
PHP

#text 3 javascript 
P 1 null
#text 3 
DIV 1 null
#text 3 
H5 1 null
#text 3

node.firstChild

node.lastChild

没有子节点，则该属性返回 NULL

<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
  var x=document.getElementById("con");
  document.write(x.firstChild.innerHTML+'<br/>');
  document.write(x.lastChild.innerHTML);
</script>

javascript

jQuery
PHP

javascript
PHP

Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。

parentNode

elementNode.parentNode  //只有一个

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

祖节点:

lementNode.parentNode.parentNode

<ul id="con">
<li id="lesson1">javascript
  <ul> 
      <li id="tcon"> 基础语法</li>
      <li>流程控制语句</li>
      <li>函数</li>
      <li>事件</li>
      <li>DOM</li>
  </ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS 
  <ul>
    <li>文字</li>
    <li>段落</li>
    <li>表单</li>
    <li>表格</li>  
  </ul> 
</li></ul>  
<script  type="text/javascript">    
   var mylist = document.getElementById("tcon"); 
  document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);
   
</script>
Paste_Image.png

nextSibling

如果无此节点，则该属性返回 null。

previousSibling

Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

Paste_Image.png

运行结果

LI = javascript
nextsibling: LI = jquery

appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

appendChild(newnode)

newnode:指定追加的节点。

Paste_Image.png
HTML
JavaScript
This is a new p

<ul id="test">
  <li>JavaScript</li>
  <li>HTML</li>
</ul> 
 
<script type="text/javascript">
  var otest = document.getElementById("test");  
  var li=document.createElement('li');
  li.innerHTML='PHP';
  otest.appendChild(li);
</script>

insertBefore()

insertBefore(newnode,node);
Paste_Image.png
This is a new p
JavaScript
HTML

<ul id="test"><li>JavaScript</li><li>HTML</li></ul> 
 
<script type="text/javascript">
  var otest = document.getElementById("test"); 
  var php=document.createElement('li');
  php.innerHTML='php';
  otest.insertBefore(php,otest.childNodes[1]);
</script>
Paste_Image.png

removeChild()

如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

nodeObject.removeChild(node)
Paste_Image.png
HTML
删除节点的内容: javascript
Paste_Image.png
<!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=content.childNodes.length-1;i>=0;i-){
     var childNode = content.childNodes[i];
     content.removeChild(childNode);
  }
}
</script>

<button onclick="clearText()">清除节点内容</button>

</body>
</html>

replaceChild

node.replaceChild (newnode,oldnew )

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

Paste_Image.png

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

  2. newnode 必须先被建立。

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

*JavaScript*是一个很常用的技术，为网页添加动态效果。
将加粗改为斜体

createElement

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

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

    var body=document.body;
    var a=document.createElement("a");
    a.href=url;
    a.innerHTML=text;
    a.style.color = "red";
    body.appendChild(a);

createTextNode

document.createTextNode(data)
Paste_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;

网页尺寸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元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight

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

offsetHeight = clientHeight + 滚动条 + 边框。

浏览器兼容性

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

网页卷去的距离与偏移量

Paste_Image.png

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

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

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

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

注意:

  1. 区分大小写

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

<!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:1px dashed red;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px red 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: 25px;"/>
        </div>
        
    </div>
    <div style="width:30%;float:left;">
        <ul style="list-style-type: none; line-height:30px;">结果：
            <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>
        </ul>
        
    </div>
    <div style="clear:both;"></div>    
</body>
</html>
Paste_Image.png

练习

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

要求：

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

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

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

<!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);a
         
         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(this)'  />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>
Paste_Image.png

综合练习

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
        #tabs {width:290px;padding:5px;height:150px;margin:20px;}
        #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
        #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
        #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
        #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
        .hide{display: none;}
    </style>
    <script type="text/javascript">
         window.onload = function(){
             var oTab = document.getElementById("tabs");
             var oUl = oTab.getElementsByTagName("ul")[0];
             var oLis = oUl.getElementsByTagName("li");
             var oDivs= oTab.getElementsByTagName("div");

             for(var i= 0,len = oLis.length;i<len;i++){
                 oLis[i].index = i;
                 oLis[i].onclick = function() {
                     for(var n= 0;n<len;n++){
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[this.index].className = "";
                 }
             };
         }
    </script>

</head>
<body>
<div id="tabs">
    <ul>
        <li class="on">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
        275万购昌平邻铁三居 总价20万买一居<br>
        200万内购五环三居 140万安家东三环<br>
        北京首现零首付楼盘 53万购东5环50平<br>
        京楼盘直降5000 中信府 公园楼王现房<br>
    </div>
    <div class="hide">
        40平出租屋大改造 美少女的混搭小窝<br>
        经典清新简欧爱家 90平老房焕发新生<br>
        新中式的酷色温情 66平撞色活泼家居<br>
        瓷砖就像选好老婆 卫生间烟道的设计<br>

    </div>
    <div class="hide">
        通州豪华3居260万 二环稀缺2居250w甩<br>
        西3环通透2居290万 130万2居限量抢购<br>
        黄城根小学学区仅260万 121平70万抛!<br>
        独家别墅280万 苏州桥2居优惠价248万<br>

    </div>
</div>

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

推荐阅读更多精彩内容