JavaScript_基础_DOM

来源：互联网发布：电子贺卡制作软件编辑：程序博客网时间：2024/05/17 04:17

DOM（document 对象模型）

imooc学习笔记（部分图片转自imooc）

这是处理HTML文档的标准方法，将HTML文档呈现为一种树状结构：

DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href

0.对body：可以直接获取--->var body=document.body

1.getElementsByName（）方法

使用方法：document.getElementsByName，返回节点数组

通过name属性查询元素，并将元素放入一个数组中返回，返回一个数组，因为叫name的元素可能不唯一。

注意因为是数组，所以是getElementsByName，而另一个是getElementById

2.getElementsByTagName()方法

使用方法：document.getElementsByTagName，返回节点数组

指标签名称，如a,img,p,input等等，同样返回数组。

这两个方法有个练手题，还不错。可以试着拓展，从文本框读入数组

3.get/setAttribute(name)方法

这是从节点获取、设置属性的方法，使用方法为：

elementnode.getAttribute(name);

elementnode.setAttribute(name,value);

所以首先得用图中方法获取节点：

var node1=document.getElementById("id");返回节点

var node2=document.getElementsByName("id");返回节点组

var text1=node1.getAttribute("属性名");返回属性值

var text2=node2[0].getAttribute("属性名");返回属性值

4.节点属性

有三种重要属性：nodeName、nodeValue、nodeType

使用方法：elementnode.nodeName ,也要先获取节点

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

5.访问子节点

使用方法：node.childNodes，返回节点组，是属性非方法

注意:

0.只返回第一层childNodes,不会自动递归

1.因为一般用getElementsByTagName获取父节点node，所一般node[0].childNodes

2.有些浏览器会将节点间的空白符当做3号文本节点。所以可能不同浏览器节点组元素个数不同。

3.获取父节点后，可以直接访问某个特定子节点，elementnode.childNodes[num].nodeName，要注意空白符

还有node.firstchild lastchild方法，但是由于空白符被计入的关系似乎不太好用。

6.访问父节点

使用方法：node.parentNode，同上，只返回最近一层的父节点。

可以parentNode.parentNode.parentNode....

7.访问兄弟节点

使用方法：node.nextSibling，node.previousSibling。若无，返回null

8.插入节点（涉及document.createElement()方法）

===使用方法：parentnode.appendChild(newnode) 在节点的子节点列表末尾添加新节点。例子：

<body><ul id="test">  <li>JavaScript</li>  <li>HTML</li></ul>  <script type="text/javascript">  var atest = document.getElementById("test");    var newnodes=document.createElement("li");  newnodes.innerHTML="aff";  atest.appendChild(newnodes);          </script> </body>

注意document.createElement("标签名")，创建一个新元素节点。然后用appendChild插入到父节点的子节点末尾。

===使用方法：parentnode.insertBefore(newnode,node);在parentnode子节点列表中，把newnode插到node之前。

例子：

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

9.删去节点removeChild()

从子节点列表中删去某个节点，若删成功，可返回被删除的节点，不成功返回NULL

使用方法：parentnode.removeChild(node)

注意：删去节点要从最后一个删，不然的话不能一次性删去，要多点几次，利用并发的bug来删。。。如下可行：

 for(var j=h.length-1;j>=0;j--){      var x=content.removeChild(h[j]);     }

10.节点替换（涉及document.createTextNode（）方法）

使用方法：parentnode.replaceChild(newnode,oldnode)

比如我想将b黑体标签中的字变为i斜体，例子（mooc网例子）：

<!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 b=document.getElementsByTagName("b")[0];          var newnode=document.createElement("i");          b.parentNode.replaceChild(newnode,b);          }      </script>   </body></html>

可以注意下在a标签中用链接调用JavaScript的方法。

按理说应该改变了，但是JavaScript字样没了，这是b标签整体被i替换，而i中无字：

var b=document.getElementsByTagName("b")[0];var newnode=document.createElement("i");var newnodeText=document.createTextNode("javascipt");var newnodet=newnode.appendChild(newnodeText);b.parentNode.replaceChild(newnode,b);

这样就可以了，使用创建文本节点方法：document.createTextNode("text"),再将此文本节点appendChild到newnode节点，最后将有文本值的新节点replace旧节点。

11.创建元素节点createElement

使用方法：document.createElement("标签名")

例子：

创建a标签后，写a内text有几种方法

用a.innerHTML="text"；用a.appendChild(document.createTextNode("text"));

修改属性有：a.style.color，setAttribute等方法。

下面是建立了a标签中链接

 var lianjie=document.createElement("a");    lianjie.innerHTML="百度";    lianjie.setAttribute("href","http://www.baidu.com");    lianjie.setAttribute("style","color:red;text-decoration:none");    main.appendChild(lianjie);

12.创建文本节点create.TextNode()

下面是一个例子，在空白网页上建立一个p标签，并用node.className赋予其属性。

注意对body进行append，因为p元素是新建的，这儿很容易忽略。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.message{    width:200px;height:100px;background-color:#CCC;}</style></head><body><script type="text/javascript">   var element=document.createElement("p");   element.className="message";   var t=document.createTextNode("afaf");   element.appendChild(t);   document.body.appendChild(element);</script> </body></html>

13.浏览器窗口大小获取

获取可视区域大小（不包括工具栏与滚动条）：window.innerHeight/innerWidth、

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

获取实际大小：

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

获取网页内容高度（包括边框、滚动条，随窗口显示大小而改变）：

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

14.网页卷去的距离与偏移量

使用方法：node.offsetHeight...

http://www.imooc.com/code/1705 ，这个例子可以说明offsetTop、offsetLeft是不随滚动条移动而变化的，他们是指滚动条最上端到窗口可见内容最上端的距离。而scrollLeft与scrollTop随滚动条移动而改变，是指获取指定对象相对于版面或者offsetParent（布局中设置position属性，即Relative，Absolute，fixed等的父容器）属性指定的父坐标计算左侧、顶端位置。

===========================================================分割线===================================================================

下面可以考虑在此文最后遇到的问题，即不重复输出文字，数字倒计时，然后实现点击数字可以立即返回。

遇到的主要问题是1.创建链接2.计时器会刷新页面

这里用一个循环来解决。

<!DOCTYPE HTML>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>登录到百度</title>  </head>  <script type="text/javascript">    function loging(){      var ac=document.getElementById("account").value;      var pw=document.getElementById("password").value;      var countdown=5;      if(confirm("您确定要登陆吗？")){        if(ac=="account"&&pw=="password"){            var main=document.body;          var newp=document.createElement("p");          var ptext=document.createTextNode("即将返回百度，倒计时：");          newp.appendChild(ptext);          main.appendChild(newp);          var a=document.createElement("a");          a.setAttribute("href","http://www.baidu.com");          a.setAttribute("style","text-decoration:none");          var shuzitext=document.createElement("b");          shuzitext.innerText='5';          var atext=document.createTextNode("秒立即返回");          a.appendChild(atext);          a.insertBefore(shuzitext,atext);          newp.appendChild(a);                 var countdown=5;          var i=setInterval(function (){            countdown=countdown-1;            shuzitext.innerText=countdown;            if(countdown==0){                  clearInterval(i);                  window.open("http://www.baidu.com","_blank","height=600,width=1000");                }            },1000);          /*var i=setInterval(function(){                document.write(countdown+"秒"+"<br>");                countdown=countdown-1;                if(countdown==0){                  clearInterval(i);                  window.open("http://www.baidu.com","_blank","height=600,width=1000");                }            },200);  */      }      }      }     </script>  <body>  用户名：  <input type="account" id="account" value="account">  <br>  密码：  <input type="password" id="password" value="password">  <br>  <input type="button" id="login" value="登录" onclick="loging()">  </body>  </html>

第二个练习：这个例子很好，有一点就是要将自身对象传进去，貌似不能直接用。

<!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(){        var th=document.getElementsByTagName("th");        var td=document.getElementsByTagName("td");        for(var i=0;i<th.length;i++){            th[i].onmouseover=function(){                var This=this;                This.style.backgroundColor="red";               }            th[i].onmouseout=function(){                var This=this;                This.style.backgroundColor="";               }                    }        for(var i=0;i<td.length;i++){            td[i].onmouseover=function(){                var This=this;                This.style.backgroundColor="yellow";               }            td[i].onmouseout=function(){                var This=this;                This.style.backgroundColor="";               }                    }                                    }     var num=3;                       // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。         function addrow(){             var oldrowlast=document.getElementsByTagName("table")[0].lastChild;             var newrow=document.createElement("tr");             var newunit_id=document.createElement("td");             var newunit_name=document.createElement("td");             var newunit_delete=document.createElement("td");             newunit_id.innerHTML="xh00"+num;             newunit_name.innerHTML="新同学"+(num-2);             num++;             newunit_delete.innerHTML="<a href='javascript:;' onclick='deleterow(this)'>删除</a>"   //href='javascript:;'为伪协议，经常需要绑定事件来实现a标签的链接，此处绑定了onclick             newrow.appendChild(newunit_id);             newrow.appendChild(newunit_name);             newrow.appendChild(newunit_delete);             oldrowlast.parentNode.appendChild(newrow,oldrowlast);             window.onload();                      }function deleterow(obj){        var thisrow=obj.parentNode.parentNode;            var thistable=thisrow.parentNode;            thistable.removeChild(thisrow);         }                  // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；                  // 创建删除函数       </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="addrow()" />   <!--在添加按钮上添加点击事件  --> </body></html>

有一点还可以改进，那就是删除同学的时候num没有做好协调。

0 0