这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 javascript 中获取元素标签中间的内容的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
使用 ajax,通过会把服务器端响应获取到 reponseText 或者 reponseXML 中的信息,以某种方法动态的写到 div 和 span 标记中,这样,可以在无刷新的情况下,改变页面内容的显示。
通过 javascript 进行动态的修改,修改的方法有两种:
1. 一种是使用 html 的每个标记的 innerHTML 属性,使用此属性,只要为它提供一个有意义的 html 代码片段,那么 html 解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行填充,填充的同时会把原来的内容覆盖掉。这种方式虽然简单,但是目前还不是 w3c 的标准,不过主流的浏览器如 IE,firefox 都已经采用。
2. 另外一种是创建一个 Text Node 节点作为 div 和 span 元素的子节点,采用这种方式,div 和 span 中要显示的内容保存在 Text Node 中,这样 div 和 span 元素显示的内容是由 Text Node 提供的。需要注意的是:在每次填写内容时,需要先把原来的 Text Node 删除掉,然后新建一个 Text Node 再写入内容。如果不删除的话,那么每次调用填充操作时,都会新建一个新的 Text Node,也就造成 div 和 span 元素下有多个 Text Node 节点,并且每个 Text Node 都会把自身的内容显示出来,因此不会覆盖原来的内容。
- <html>
- <head>
- <style>
- .CSS1{background-color:ff0000;color:ff9966;border:1;cursor:hand;} .css2{background-color:00ff00;color:ffffff;border:1;cursor:hand;}
- </style>
- <script type="text/javascript">
- function changeneirong() {
- var spanv = document.getElementsByTagName("span");
- spanv[2].innerHTML = "我由常军魁变为了span";
- }
- function changediv() {
- document.getElementsByTagName("div")[0].innerHTML = "我由常军魁变成了div";
- }
- function changep() {
- document.getElementsByTagName("p")[0].innerHTML = "我由常军魁变成了p标签";
- }
- function change() {
- var spanvar = document.getElementsByTagName("span");
- alert(spanvar[0].innerHTML);
- document.getElementsByTagName("span")[0].className = "css2";
- }
- function fillDivWithInnerHTML() {
- var username = document.getElementById("username").value;
- var textDiv = document.getElementById("textDiv");
- textDiv.innerHTML = username;
- }
- function fillDivWithTextNode() {
- var textDiv = document.getElementById("textDiv");
- //首先删除所有已新建的Text Node节点
- while (textDiv.hasChildNodes()) {
- textDiv.removeChild(textDiv.childNodes[0]);
- }
- var textNode = document.createTextNode(document.getElementById("username").value);
- textDiv.appendChild(textNode);
- }
- function fillSpanWithInnerHTML() {
- var username = document.getElementById("username").value;
- var textSpan = document.getElementById("textSpan");
- textSpan.innerHTML = username;
- }
- function fillSpanWithTextNode() {
- var textSpan = document.getElementById("textSpan");
- //首先删除所有已新建的Text Node节点
- while (textSpan.hasChildNodes()) {
- textSpan.removeChild(textSpan.childNodes[0]);
- }
- var textNode = document.createTextNode(document.getElementById("username").value);
- textSpan.appendChild(textNode);
- }
- </script>
- </head>
- <body>
- <span class="css1" onclick="change()">
- 常军魁
- </span>
- <span class="css1" onclick="javascript:this.className='css2'">
- 这是一段文字
- </span>
- <br />
- <span onclick="changeneirong()" style="corsur:hand;">
- 常军魁
- </span>
- <br />
- <div onclick="changediv()">
- 常军魁
- </div>
- <p onclick="changep()">
- 常军魁
- </p>
- <input type="text" id="username" name="username" />
- <br/>
- <input type="button" id="fillDivWithInnerHTML" value="fillDivWithInnerHTML"
- onclick="fillDivWithInnerHTML()" />
- <br/>
- <input type="button" id="fillDivWithTextNode" value="fillDivWithTextNode"
- onclick="fillDivWithTextNode()" />
- <br/>
- <input type="button" id="fillSpanWithInnerHTML" value="fillSpanWithInnerHTML"
- onclick="fillSpanWithInnerHTML()" />
- <br/>
- <input type="button" id="fillSpanWithTextNode" value="fillSpanWithTextNode"
- onclick="fillSpanWithTextNode()" />
- <span id="textSpan">
- </span>
- <br/>
- <div id="textDiv">
- </div>
- </body>
- </html>
以上就是小编为大家带来的 javascript 中获取元素标签中间的内容的实现方法全部内容了,希望大家多多支持 phperz~
来源: http://www.phperz.com/article/17/0519/331371.html