javascript基础学习-dom模型(七)

最新推荐文章于 2023-05-12 13:44:41 发布

IluckySi

最新推荐文章于 2023-05-12 13:44:41 发布

阅读量755

点赞数

分类专栏： ------javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/sidongxue2/article/details/24603395

版权

------javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

今天我们学习一下javascript的dom元素,即文档对象模型，
dom分为元素节点,文本节点和属性节点.
比如:<a name="link" href="http://baidu.com">百度</a>,在这个元素中,<a>是元素节点,name=”link"和href="http://baidu.com"是属性节点,
百度是文本节点.
那么如何使用dom更好的为我们的网页服务呢？下面通过几个例子加简单说明一下.
1.documnet.getElementByTagName("name");

 <html>
 <head>
  <title>DomTest1</title>
  <script language="javascript">
   function test(){
    var liElements=document.getElementsByTagName("li");
    var ulElements=document.getElementsByTagName("ul");
    var ulElements2=ulElements[1].getElementsByTagName("li");
    alert(liElements.length+"-"+liElements[3].tagName+"-"+liElements[5].childNodes[0].nodeValue);
    alert(ulElements2.length+"-"+ulElements2[1].tagName+"-"+ulElements2[2].childNodes[0].nodeValue);
   }
  </script>
 </head>
 <body οnlοad="test()">
  <ul>客户端语言
   <li>html</li>
   <li>css</li>
   <li>javascript</li>
  </ul>
  <ul>服务器语言
   <li>java</li>
   <li>c</li>
   <li>asp</li>
  </ul>
 </body>
</html>

结果依次弹出窗口6-li-asp和3-li-asp.
2.document.getElementById("id");

   <html>
 <head>
  <title>DomTest1</title>
  <script language="javascript">
   function test(){
    var i=document.getElementById("js");
    alert(i.tagName+"-"+i.childNodes[0].nodeValue);
   }
  </script>
 </head>
 <body οnlοad="test()">
  <ul>客户端语言
   <li>html</li>
   <li>css</li>
   <li id="js">javascript</li>
  </ul>
  <ul>服务器语言
   <li>java</li>
   <li>c</li>
   <li>asp</li>
  </ul>
 </body>
  </html>

结果弹出窗口Li-javascript.
3.元素的父子关系.

 <html>
 <head>
  <title>DomTest3</title>
  <script language="javascript">
   function test(){
    var ul=document.getElementById("ul");
    var string="";
    if(ul.hasChildNodes()){
     var children=ul.childNodes;
     for(var i=0;i<children.length;i++){
      string+=children[i].nodeName+"\n";
     }
    }
    alert(string);
   }
  </script>
 </head>
 <body οnlοad="test()">
  <ul id="ul">
   <li>html</li>
   <li>css</li>
   <li>javascript</li>
  </ul>
 </body>
 </html>

结果窗口输出Li Li Li.
4.元素的属性节点.

 <html>
 <head>
  <title>DomTest3</title>
  <script language="javascript">
   function test(){
    var link=document.getElementById("link");
    alert(link.getAttribute("title"));
   }
  </script>
 </head>
 <body>
  <input type="button" value="点我" id="link" onClick="test()" title="Ilucky"></input>
 </body>
   </html>

结果点击页面上的button弹出Ilucky.
5.创建新节点.

   <html>
 <head>
  <title>DomTest5</title>
  <script language="javascript">
   function test(){
    var p=document.createElement("p");
    var text=document.createTextNode("I am 26!");
    p.appendChild(text);
    document.body.appendChild(p);
   }
  </script>
 </head>
 <body>
  <body οnlοad="test()">
   <p>I am Ilucky!</p>
  </body>
 </body>
</html>

结果页面显示I am Ilucky! I am 26!.
6.innerHtml属性表示某个标记之间的所有内容,包括代码本身,并且该属性不仅支持读取,还支持写.

 <html>
 <head>
  <title>DomTest5</title>
  <script language="javascript">
   function test(){
    var div=document.getElementById("div");
    alert(div.innerHTML);
    div.innerHTML="<h1>chage</h1>";
   }
  </script>
 </head>
 <body>
  <body οnlοad="test()">
   <div id="div">
    <span>hello</span>
    <p>enter</p>
   </div>
  </body>
 </body>
</html>

结果页面显示hello和enter并且弹出窗口<span>hello</span><p>enter</p>,关闭窗口,页面显示change.
请继续关注我的博客，欢迎交流......

IluckySi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础学习-dom模型(七)

今天我们学习一下javascript的dom元素,即文档对象模型，dom分为元素节点,文本节点和属性节点.比如:http://baidu.com">百度,在这个元素中,是元素节点,name=”link"和href="http://baidu.com"是属性节点,百度是文本节点.那么如何使用dom更好的为我们的网页服务呢？下面通过几个例子加简单说明一下.1.documnet.ge
复制链接

扫一扫