认识JS
Posted 壹碗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了认识JS相关的知识，希望对你有一定的参考价值。
javascript是一种被嵌入在html网页中的基于对象和事件驱动的脚本语言。脚本实际上就是一段代码，用来完成某些特殊的功能。
JQuery是JS非常优秀的一个库，两者获取的对象不同，但可以相互转化，以后再表。
（一）JS的调试
function div_alert(){ alert("请输入你的名字！"); }; function div_confirm(){ a = confirm("请输入你的名字~") console.log(a) }; function div_prompt(){ a = prompt("亲输入你的名字！") console.log(a) console.log(typeof(a)); }; function mingzia(){ mingzi = prompt("请输入你的名字：") console.log(typeof(mingzi)); if(mingzi == null){ console.log("您按下了取消键"); }else if(mingzi == \'\'){ console.log("您输入的内容为空！"); mingzia(); }else{ console.log("您输入的内容是："+ mingzi) }; }; function Doc_wri(){ document.write("我是一个惊喜！") }
其中，console.log()是在控制台输出。alert()弹出一个警示框。confime()弹出一个可以选择“确定”和“取消”的框，对于两个框会有不同的布尔类型的返回值，true and false。prompt()是一个可以输入内容的框，输入的内容是String类型，可以使用typeof()将类型打印出来。
（二）JS与DOM
DOM是Document Object Model 翻译为文档对象模型，是HTML和XML文档编辑接口。
HTML DOM定义了访问和操作HTML文档的标准方法。DOM树结构表达HTML文档。
在网上找了一个HTML的树形结构：
（A）在HTML DOM中，所有的事物都被称之为节点。DOM是被视为节点的树的HTML。节点间存在层级关系。
（1）DOM树结构中又可以详细的分为：整个文档节点、元素节点、文本节点、属性节点和注释节点。每个节点都有节点类型、节点名称、节点值（nodeType、nodeName、nodeValue）。其中元素的NodeType=1，文本的nodeType=3，文档的nodetype=9。
（2）对于DOM树结构，节点间彼此是有层级结构的，使用：父、子、兄弟节点、同胞节点等语言描述（parentNode、previousSibling、nextSibling、firstChild、lastChild）。
（3）对于节点的的操作，也可以总结为“增删查改”。
（4）DOM 处理中的常见错误是希望元素节点包含文本。如果想通过节点控制文本，可以使用：innerHTML函数。
本段代码主要是使用JS原生代码，查找某一个节点的父节点、兄弟节点和子节点等。
<!DOCTYPE html> <html> <head> <title>节点间的关系</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto;} </style> </head> <body> <div class="wrap"> <h1>介绍DOM结构</h1> <p class="test">There are a number of reason why the DOM is awesome, here are some:</p> <ul> <li>我是一个测试！</li> <li id="everywhere"> <span>随时可以找到。</span> <span>我想。</span> </li> <li class="test">简单。</li> <li class="test">快速。</li> </ul> </div> <script type="text/javascript"> // 找到前一个兄弟节点previousSibling,JS会将空格也算进去，所以要将空格排除 function pre(elem){ do{ elem = elem.previousSibling; console.log(elem.nodeType+elem.nodeName+elem.nodeValue +\'里面的文本是：\'+elem.innerHTML) }while(elem.nodeType != 1); return elem; }; //找到下一个兄弟节点 function next(elem){ do{ elem = elem.nextSibling; console.log(elem.nodeType+elem.nodeName+elem.nodeValue +\'里面的文本是：\'+elem.innerHTML); }while(elem && elem.nodeType != 1); return elem; }; //查找第一个子元素 function first(elem){ elem = elem.firstChild; if(elem && elem.nodeType !=1){ elem = next(elem); } return elem; //return elem && elem.nodeType !=1 ? next(elem) : elem; }; //查找最后一个子元素 function last(elem){ elem = elem.lastChild; return elem && elem.nodeType !=1 ? pre(elem) : elem; }; //查找父元素 function parent(elem){ elem = elem.parentNode; console.log(elem.nodeType+elem.nodeName+elem.nodeValue +\'里面的文本是：\'+elem.innerHTML); return elem && elem.nodeType !=1 ? parent(elem) : elem; } elem = document.getElementById(\'everywhere\') // pre(elem); //next(elem); //de = first(elem) //de = last(elem) de = parent(elem) console.log("我得到的内容是："+ de) </script> </body> </html>
（B）标准的DOM方法。
DOM编程可以是一个非常平滑的过程，提供了非常强大的方法快速的获取想要的节点的办法
（1）获取元素和属性的修改。
（2）DOM结构的增删查改。
注：JS设置标签的样式可以通过node.style.color = value 设置。
<!-- 元素属性的修改 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>节点的增删查改</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto;} .one{font-weight: bold; font-size: 30px;} </style> </head> <body> <div class="wrap"> <h1>介绍DOM结构</h1> <p class="test">There are a number of reason why the DOM is awesome, here are some:</p> <ul> <li>我是一个测试！</li> <li id="everywhere"> <span>随时可以找到。</span> <span>我想。</span> </li> <li class="test">简单。</li> <li class="test">快速。</li> </ul> </div> <script type="text/javascript"> //获取的是指定的唯一的一个元素 document.getElementById("everywhere").style.color=\'red\'; //获取的是一个数组：节点列表 console.log(document.getElementsByTagName("li").length); //document.getElementsByTagName("li")获取的是一个JS对象 //document.getElementsByTagName("li")[0]是一个DOM对象 // for i in document.getElementsByTagName("li"){ // console.log(i.innerHTML) // } //python的写法，不应该是这样的,我错了！！！ for(var i = 0, len=document.getElementsByTagName("li").length; i<len; i ++){ console.log(document.getElementsByTagName("li")[i].innerHTML); }; console.log(document.getElementsByClassName("test").length); //查找指定的拥有某个类名的元素 function hasClass(name,type){ var r =[]; var re = new RegExp("(^|\\\\s)" + name + "(\\\\s|s)"); var e = document.getElementsByTagName(type||"*"); for(var j=0; j<e.length;j++){ //test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回 false. if(re.test(e[j])){ r.push(e[j]); }; }; return r; }; //获取元素属性:getAttribute(property) //设置元素属性:setAttribute(property,value) console.log(document.getElementsByTagName(\'li\')[1].getAttribute(\'id\')); document.getElementsByTagName(\'li\')[0].setAttribute(\'class\',\'one\'); </script> </body> </html>
<!-- DOM结构的增删查改 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>节点的增删查改</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto;} .one{font-weight: bold; font-size: 30px;} .a_{font-size: 20px; text-decoration: none;font-weight: bold;} </style> </head> <body> <div class="wrap"> <h1>介绍DOM结构</h1> <p class="test">There are a number of reason why the DOM is awesome, here are some:</p> <ul> <li>我是一个测试！</li> <li id="everywhere"> <span>随时可以找到。</span> <span>我想。</span> </li> <li class="test">简单。</li> <li class="test">快速。</li> </ul> <ol id=\'ol_list\'></ol> </div> <script type="text/javascript"> //获取的是指定的唯一的一个元素 document.getElementById("everywhere").style.color=\'red\'; //获取的是一个数组：节点列表 console.log(document.getElementsByTagName("li").length); //document.getElementsByTagName("li")获取的是一个JS对象 //document.getElementsByTagName("li")[0]是一个DOM对象 // for i in document.getElementsByTagName("li"){ // console.log(i.innerHTML) // } //python的写法，不应该是这样的,我错了！！！ for(var i = 0, len=document.getElementsByTagName("li").length; i<len; i ++){ console.log(document.getElementsByTagName("li")[i].innerHTML); }; console.log(document.getElementsByClassName("test").length); //查找指定的拥有某个类名的元素 function hasClass(name,type){ var r =[]; var re = new RegExp("(^|\\\\s)" + name + "(\\\\s|s)"); var以上是关于认识JS的主要内容，如果未能解决你的问题，请参考以下文章