这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
javascript DOM 对象的学习实例代码
[Ctrl+A 全选 注:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- DOM对象的学习
- </title>
- <script language="javascript" type="text/javascript">
- function searchNode() {
- /*文本节点*/
- /*元素节点*/
- /*属性节点*/
- var nodes = document.getElementsByTagName("li");
- alert("节点数" + nodes.length + "第一个节点元素的名称" + nodes[0].tagName + ";第四个节点的第一个节点文本" + nodes[3].childNodes[0].nodeValue);
- var nodes2 = document.getElementsByTagName("ul");
- var subnodes = nodes2[1].getElementsByTagName("li");
- alert("节点数" + subnodes.length + ";第一个节点元素的名称" + subnodes[0].tagName + ";第一个节点元素的第一个节点文本" + subnodes[0].childNodes[0].nodeValue);
- var nodeID = document.getElementById("liNode");
- alert("节点的名称" + nodeID.tagName + ";第一点节点的第一节点的文本" + nodeID.childNodes[0].nodeValue);
- //遍历元素
- var ulNodes = document.getElementById("ulNode");
- var DOMString = "";
- if (ulNodes.hasChildNodes()) {
- var subULNodes = ulNodes.childNodes;
- for (var i = 0; i < subULNodes.length; i++) {
- DOMString = DOMString + subULNodes[i].childNodes[0].nodeValue + "\n";
- }
- }
- alert(DOMString);
- //节点属性
- var imgTitle = document.getElementsByTagName("img")[0];
- var titleString = imgTitle.getAttribute("title");
- var altString = imgTitle.getAttribute("alt");
- alert(titleString + "\n" + altString);
- var p = document.createElement("p");
- var text = document.createTextNode("这是第二个节点");
- p.appendChild(text);
- document.body.appendChild(p);
- //innerHTML的使用
- var inner = document.getElementById("inner");
- alert(inner.innerHTML);
- inner.innerHTML = "<img class="img - responsive " src='images/album.gif'/>";
- }
- </script>
- </head>
- <body onload="searchNode()">
- <ul id="ulNode">
- <li>
- java
- </li>
- <li>
- javascript
- </li>
- <li>
- CSS
- </li>
- </ul>
- <ul>
- <li id="liNode">
- ajax
- </li>
- <li>
- c#
- </li>
- <li>
- c++
- </li>
- </ul>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_8/1490192851_3827.gif"
- />
- <p>
- 这是第一个节点
- </p>
- <div>
- <p>
- innerHTML的使用
- </p>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0421/287061.html