[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

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+"
");
    }
} 

setAttribute()

elementNode.setAttribute(name,value)

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

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

节点属性

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')
}

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

修改

javascript
jQuery
PHP

  javascript  
  
javascript
  
jQuery
  
PHP

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

javascript
jQuery
PHP

javascript

jQuery
PHP

javascript
PHP

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

parentNode

elementNode.parentNode  //只有一个

  
 parentNode 获取指点节点的父节点
 

祖节点:

lementNode.parentNode.parentNode

javascript
  
 
      
 基础语法
      
流程控制语句
      
函数
      
事件
      
DOM
  

das
dadf
HTML/CSS 
  

    
文字
    
段落
    
表单
    
表格
  
  
 
  

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

  
JavaScript
  
HTML
 
 
 

insertBefore()

insertBefore(newnode,node);

Paste_Image.png

This is a new p
JavaScript
HTML

JavaScript
HTML
 
 
 

Paste_Image.png

removeChild()

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

nodeObject.removeChild(node)

Paste_Image.png

HTML
删除节点的内容: javascript

Paste_Image.png

  
html
  
php
  
javascript
  
jquery
  
java




清除节点内容

replaceChild

node.replaceChild (newnode,oldnew ) 

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

Paste_Image.png

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

2. newnode 必须先被建立。

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

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

createElement

    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文档的标签

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。

    

        

            

                
请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。
            
            
        
        
    
    

        
结果：
            
offsetTop : 
            
offsetLeft : 
            
 scrollTop : 
            
scrollLeft : 
        
        
    
    
    

Paste_Image.png

练习

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

要求：

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

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

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

 
    
     
   
  
  
       

       

        
学号
        
姓名
        
操作
       
  

       

        
xh001
        
王小明
        
删除
   
       

       

        
xh002
        
刘小芳
        
删除
   
       
  

       
          
 

Paste_Image.png

综合练习

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

    
    
    
    




    

        
房产
        
家居
        
二手房
    
    

        275万购昌平邻铁三居 总价20万买一居

        200万内购五环三居 140万安家东三环

        北京首现零首付楼盘 53万购东5环50平

        京楼盘直降5000 中信府 公园楼王现房

    
    

        40平出租屋大改造 美少女的混搭小窝

        经典清新简欧爱家 90平老房焕发新生

        新中式的酷色温情 66平撞色活泼家居

        瓷砖就像选好老婆 卫生间烟道的设计


    
    

        通州豪华3居260万 二环稀缺2居250w甩

        西3环通透2居290万 130万2居限量抢购

        黄城根小学学区仅260万 121平70万抛!

        独家别墅280万 苏州桥2居优惠价248万


    

Paste_Image.png