DOM(Document Object Model（文档对象模型）)
HTML DOM 树
什么是DOM
DOM 是 W3C（万维网联盟）的标准呢。
DOM定义了访问HTML和XML文档的标准："W3C文档对象模型DOM是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。"
W3C DOM标准被分为3个不同的部分：
- 核心DOM-针对任何结构化文档的标准模型
- XML DOM-针对XML文档的标准模型
- HTML DOM-针对HTML文档的标准模型
什么是 XML DOM？
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？
HTML DOM 是：
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点自身属性
- attributes - 节点（元素）的属性节点
- setAttribute(key,value)-设置标签属性
- getAttribute(key)-获取标签属性
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
- outetHTML
- innerText-文本
- outerText
导航属性
- parentNode - 节点（元素）的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点（元素）的子节点
常用导航属性
- parentElement // 父节点标签元素
- children // 所有子标签
- firstElementChild // 第一个子标签元素
- lastElementChild // 最后一个子标签元素
- nextElementtSibling // 下一个兄弟标签元素
- previousElementSibling // 上一个兄弟标签元素
DOM对象方法
getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。
常用查找操作
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
var tag = document.createElement('a') tag.innerText = "cc" tag.className = "c1"
var obj = document.getElementById('i1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
总文档高度 document.documentElement.offsetHeight 当前文档占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight //距离上级定位高度 tag.offsetTop //父定位标签 tag.offsetParent //滚动高度 tag.scrollTop /* clientHeight -> 可见区域：height + padding clientTop -> border高度 offsetHeight -> 可见区域：height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高：height + padding scrollTop -> 滚动高度 特别的： document.documentElement代指文档根节点 */
console.log // 输出框 alert //弹出框 confirm // 确认框 // URL和刷新 location.href //获取URL location.href = "url" // 重定向 location.reload() // 重新加载 // 定时器 setInterval // 多次定时器 clearInterval //清除多次定时器 setTimeout // 单次定时器 clearTimeout // 清除单次定时器
Event事件
onclick //当用户点击某个对象时调用的事件句柄。 ondblclick //当用户双击某个对象时调用的事件句柄。 onfocus // 元素获得焦点。 //练习：输入框 onblur // 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange //域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress //某个键盘按键被按下并松开。 onkeyup // 某个键盘按键被松开。 onload //一张页面或一幅图像完成加载。 onmousedown // 鼠标按钮被按下。 onmousemove // 鼠标被移动。 onmouseout // 鼠标从某元素移开。 onmouseout //鼠标从某元素标签移开，和mouseout不同 onmouseover // 鼠标移到某元素之上。 onselect //文本被选中。 onsubmit // 确认按钮被点击。 注意：在JS中触发时去掉on
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ display: inline-block; } </style> </head> <body> <div id="box1"> <select multiple="multiple" size="10" id="left"> <option>book</option> <option>book2</option> <option>book3</option> <option>book4</option> <option>book5</option> <option>book6</option> </select> </div> <div id="choice"> <input class="add" type="button" value="---->" onclick="add()"><br> <input class="remove" type="button" value="<----" onclick="remove();"><br> <input class="add-all" type="button" value="====>" onclick="addall()"><br> <input class="remove-all" type="button" value="<====" onclick="removeall()"> </div> <div> <select multiple="multiple" size="10" id="right"> <option>book9</option> </select> </div> <script> var left=document.getElementById("left"); var right=document.getElementById("right"); function add(){ var options=left.children; for (var i=0; i<options.length;i++){ var option=options[i]; if(option.selected==true){ option.selected=false; right.appendChild(option); i--; } } } function addall(){ var options=left.children; for (var i=0; i<options.length;i++){ var option=options[i]; right.appendChild(option); i--; } } function remove() { var options=right.children; for (var i=0;i<options.length;i++){ if (options[i].selected==true){ options[i].selected=false; left.appendChild(options[i]); i--; } } } function removeall() { var options=right.children; for (var i=0;i<options.length;i++){ left.appendChild(options[i]); i--; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title-menu{ background-color: #cccccc; } ul { list-style: none;/*去点*/ padding: 0; margin: 0; } ul li{ float: left; color: white; padding: 8px 8px; background-color: #336699; } .content{ clear: both; border: 1px solid red; min-height: 100px; } .head{ display: none; } .active{ background-color: #e1e1e1; color: black; } </style> </head> <body> <div style=" 400px; margin: 0 auto"> <div class="title-menu"> <div class="title"> <ul> <li target="h1" class="active" onclick="tab(this)">市场分析</li> <li target="h2" onclick="tab(this)">资源统计</li> <li target="h3" onclick="tab(this)">其他</li> </ul> </div> <div class="content"> <div content="h1">内容1</div> <div content="h2" class="head">内容2</div> <div content="h3" class="head">内容3</div> </div> </div> </div> <script> function tab(ths) { var tagt=ths.getAttribute("target"); ths.className="active"; var brothers=ths.parentElement.children;//获得所有兄弟 for (var i=0;i<brothers.length;i++){ if (ths !=brothers[i]){ brothers[i].classList.remove("active"); } } var contents=document.getElementsByClassName("content")[0].children; for (var j=0;j<contents.length;j++){ var con=contents[j].getAttribute("content"); if (con!=tagt){ contents[j].classList.add("head") } else { contents[j].classList.remove("head") } } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="province" onchange="func(this)"> <option>省份</option> </select> <select id="city"> <option>市区</option> </select> <script> date={"北京":["昌平","海淀"], "河南":["郑州","信阳"], "河北":["邯郸","廊坊"]}; var pro=document.getElementById("province"); var city=document.getElementById("city"); for (var i in date){ var option_pro=document.createElement("option"); //<option></option> option_pro.innerHTML=i;////<option>省份</option> pro.appendChild(option_pro) } function func(self) { var choice=(self.options[self.selectedIndex]).innerHTML; city.options.length=0; for (var j in date[choice]){ var option_city=document.createElement("option"); option_city.innerHTML=date[choice][j]; city.appendChild(option_city) } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名"> <input type="text" placeholder="请输入用户名"> <script> function func1() { var ky=document.getElementsByClassName("keyword")[0]; ky.value="" } function func2() { var ky=document.getElementsByClassName("keyword")[0]; if (ky.value.trim().length==0){ ky.value="请输入用户名" } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } #div1{ position: fixed; width: 100%; height: 800px; background-color: #cccccc; z-index: 1000; } #div2{ position: fixed; width: 100%; z-index: 1001; top: 0; left: 0; right: 0; bottom: 0; background-color: red; opacity: 0.1; /*透明度*/ } #div3{ width: 200px; height: 200px; background-color: green; position: absolute; z-index: 1002; top: 37%; left: 37%; } .public{ display: none; } </style> </head> <body> <div id="div1"> <input type="button" value="添加" onclick="add()"> </div> <div id="div2" class="div public"> </div> <div id="div3" class="div public"> <input type="button" value="撤销" onclick="cancel()"> </div> <script> function add() { var ele=document.getElementsByClassName("div") for (var i=0;i<ele.length;i++){ ele[i].classList.remove("public") } } function cancel() { var ele=document.getElementsByClassName("div") for (var i=0;i<ele.length;i++){ ele[i].classList.add("public") } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="selectall()"> <input type="button" value="取消" onclick="cancel()"> <input type="button" value="反选" onclick="revoser()"> <hr> <table border="1" cellspacing="0" class="tab"> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> <td>333</td> <td>333</td> </tr> </table> <script> function selectall() { var ele=document.getElementsByClassName("tab")[0]; var inputs=ele.children[0].getElementsByTagName("input"); for (var i in inputs){ inputs[i].checked=true; } } function cancel() { var ele=document.getElementsByClassName("tab")[0]; var inputs=ele.children[0].getElementsByTagName("input"); for (var i in inputs){ inputs[i].checked=false; } } function revoser() { var ele=document.getElementsByClassName("tab")[0]; var inputs=ele.children[0].getElementsByTagName("input"); for (var i in inputs){ if (inputs[i].checked){ inputs[i].checked=false; } else { inputs[i].checked=true; } } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="background-color: red;color: black;font-size: 54px;text-align: center"> 欢迎莅临指导 </div> <script type="text/javascript"> setInterval(function () { d1=document.getElementById("i1"); d1_text=d1.innerText; first_text=d1_text[0]; sub_text=d1_text.slice(1,d1_text.length); new_str=sub_text+first_text; d1.innerText=new_str; },500); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ position: fixed; right: 28px; bottom: 19px; } .hide{ display: none; } </style> </head> <body onscroll="func()"> <div style="height: 2000px;"></div> <div id="div" class="top hide"> <a href="javascript:void(0);" onclick="go_top();">返回顶部</a> </div> <script> function func() { var top_length=document.body.scrollTop; var ele=document.getElementById("div"); if (top_length>200){ ele.classList.remove("hide"); } else { ele.classList.add("hide"); } } function go_top() { document.body.scrollTop=0; } </script> </body> </html>
jQuery
jQuery查找网址
http://jquery.cuishifeng.cn/
jQuery 是一个 JavaScript 库，极大的简化了JavaScript的编程。
jQuery语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有段落
- $(".test").hide() - 隐藏所有 class="test" 的所有元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。