一、DOM对象
1.理解
DOM赋予了操作页面的能力
可以通过DOM,创建元素,插入,修改,删除页面中的内容
html中的内容被被js解析成为DOM树
html中所有内容都是节点
ttml文档->文档节点
元素|标签->元素节点
属性 ->属性节点
标签对中的文本 ->文本节点
2.获取元素节点方式
1.document.getElementById(“id属性值”)
获取到页面中某一个元素节点 2.主语.getElementsByClassName(“Class属性值”)
通过元素Class属性值获取到一个或多个元素节点
主语:document|元素节点
3.主语.getElementsByTagName(“标签名”)
通过元素的标签名获取到一个或者一组元素
主语:document|元素节点
4.document.getElementsByName(“name属性值”)
通过Name属性值获取一组元素
一般在表单元素身上会有name属性**,name属性的作用为后台区分前台元素的唯一,如果没有name,标签元素没有提交数据的能力**<ul id="ul"> <li>ul-li1</li> <li class="greend">ul-li2</li> <li>ul-li3</li> </ul> <ol> <li>ol-li1</li> <li>ol-li2</li> <li class="greend">ol-li3</li> </ol> <form action=""> <input type="radio" name="gender" value='man'> <input type="radio" name="gender" value='woman'> <input type="submit"> </form> <script type="text/javascript"> var ul=document.getElementById("ul"); //class属性值 //主语是document,在整个文档找 var lis1=document.getElementsByClassName("greend"); console.log(lis1); //主语是ul节点，在ul中去找 var lis2=ul.getElementsByClassName("greend"); console.log(lis2); //标签名 //主语document var li1=document.getElementsByTagName("li"); console.log(li1); //主语是ul节点 var li2=ul.getElementsByTagName("li"); console.log(li2); //name属性值 var names=document.getElementsByName("gender"); console.log(names); var names=document.getElementsByName("gender"); console.log(names); </script>
3.创建节点
创建节点
document.createElement(“元素名”); 创建元素节点
document.createTextNode(“文本”) 创建文本节点
插入节点
父节点.appendChild(子节点)
子节点追加到父节点中的最后位置
父节点.insertBefore(节点1,节点2)
节点1: 新节点
节点2: 参照节点
返回插入的节点
必须有2个参数
第二个参数null,undefined都相当于追加,作用与appendChild相同<button type="button" onclick="fn()">点击</button> <script type="text/javascript"> function fn(){ //创建节点 var box=document.createElement("div"); box.style.height="500px"; box.style.background="pink"; //创建p标签 //var p=document.createElement("p"); //p添加到文本节点 //var text=document.createTextNode("明天的你会感谢今天努力的自己"); //p.appendChild(text); //p.innerHTML="今天你努力了吗？"； //box.appendChild(p); //追加到最后 //document.body.appendChild(box); //第二种方法 box.innerHTML="<p>今天你努力了吗？</p>"; //插入到btn之后 var btn=document.getElementsByTagName("button")[0]; //document.body.appendChild(box); //插入到btn之前 //document.body.insertBefore(box,btn); //第二个参数null,undefined都相当于追加,作用与appendChild相同 document.body.insertBefore(box,null); console.log(document.body.insertBefore(box,null)); } </script>
4.间接查找节点
childNodes 返回元素的一个子节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点<div> <ul class="box"> <li>篮球</li> <li>乒乒球</li> <li>足球</li> <li>网球</li> </ul> <ol> <li>排球</li> <li>羽毛球</li> </ol> </div> <script type="text/javascript"> var ul=document.getElementsByClassName("box")[0]; console.log(ul); console.log(ul.childNodes);//全部子节点 console.log(ul.firstChild);//#text 第一个节点 console.log(ul.firstElementChild);//第一个元素节点 console.log(ul.lastChild);//#text 最后一个节点 console.log(ul.lastElementChild);//最后一个元素节点 console.log(ul.firstElementChild.nextSibling);//#text 下一个兄弟节点 console.log(ul.firstElementChild.nextElementSibling);//第一个元素的下一个兄弟元素节点 console.log(ul.lastElementChild.previousElementSibling);//最后一个元素上个兄弟元素节点 console.log(ul.parentNode);//返回元素父节点 </script>
5.点击字节点隐藏案例
<!-- 练习: ul列表,列表中有5个子元素li,每一个li中定义span,span中定义内容 点击span,把父元素li隐藏 --> <ul> <li><span>唱歌</span></li> <li><span>跳舞</span></li> <li><span>跑步</span></li> <li><span>打游戏</span></li> <li><span>追剧</span></li> </ul> <script type="text/javascript"> var span=document.getElementsByTagName("span"); //遍历数组，给每个span绑定点击事件 for(var i=0;i<span.length;i++){ span[i].onclick=function fn(){ //当前对象->被点击的span节点,可变的 //console.log(this.parentNode.parentNode); console.log(this.parentNode); this.parentNode.style.display="none"; } } </script>
6.留言板案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ width: 500px; height: 500px; border:1px solid black; } </style> </head> <body> <input type="text" name="uname" id="uid" value="" /> <input type="submit" value="提交" id="su" onclick="fn()"/><br> <ul id="ul"> </ul> <script type="text/javascript"> //var uname=document.getElementsByTagName("uname")[0]; //console.log(uname); var uid=document.getElementById("uid"); //console.log(uid.value); //var submit=document.getElementById("su"); var ul=document.getElementById("ul"); function fn(){ //创建li var li=document.createElement("li"); //添加内容 li.innerHTML=uid.value; //添加li在ul中后面追加 //ul.appendChild(li); //把li放在ul中，插入到ul元素的最上面 ul.insertBefore(li,ul.firstElementChild); } // uname.οnkeydοwn=function(){ // // event 事件源对象 // if(event.keyCode==13){ // fn(); // } // } </script> </body> </html>
7.删除节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 移出子节点 父节点.removeChild(子节点) --> <input type="text" name="info"><button type="button">删除</button> <script type="text/javascript"> var btn=document.getElementsByTagName("button")[0]; var info=document.getElementsByName("info")[0]; btn.onclick=function(){ document.body.removeChild(info); } </script> </body> </html>
8.替换节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 替换节点： 父节点.replaceChild(节点1，节点2); 节点1：是新节点 节点2：老节点 返回值被替换的节点 如果新节点为父节点已有节点，效果老节点删除，被替换成为新节点 --> <ul id="box"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> <script type="text/javascript"> var box=document.getElementById("box"); //创建一个新的li节点 var newli=document.createElement("li"); //添加内容 newli.innerHTML="越努力也幸运！！！！"; //替换节点，返回被替换的节点 console.log(box.replaceChild(newli,box.firstElementChild)); //li4 console.log(box.lastElementChild); //li3 console.log(box.lastElementChild.previousElementSibling); //li4替换li3如果新节点为父节点已有节点 //，效果老节点删除，被替换成为新节点 box.replaceChild(box.lastElementChild.previousElementSibling,box.lastElementChild); </script> </body> </html>
9.克隆节点
节点.cloneNode(boolean) 克隆节点
true 当前节点包含其字内容全部克隆
false 只克隆当前节点,属性+属性值会克隆,id值也会相同需要修改
html属性,css样式+js功能如果定义在标签上标签上的内容都会被克隆
,但是js中的css中单独的语法,不会被克隆<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* html属性,css样式+js功能如果定义在标签上标签上的内容都会被克隆,但是js中的css中单独的语法,不会被克隆 */ #box{ font-size: 30px; } </style> </head> <body> <div id="box" style="background: skyblue;"> <h3>哈哈哈哈<span>嘿嘿嘿嘿嘿嘿</span></h3> </div> <script type="text/javascript"> var box=document.getElementById("box"); box.onclick=function(){ console.log(456); } //克隆 var newNode=box.cloneNode(true); document.body.appendChild(newNode); console.log(newNode); newNode.id="box2"; //自定义属性，html标签上不会显示，但是js中可以通过写法某个元素绑定自定义属性，可以存储值 newNode.index=15; newNode.hhh="哈哈哈"; console.log(newNode.index,newNode.hhh); </script> </body> </html>
10.innerHTML和innerText区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- innerHTML和innerText区分 --> <div class="div1"> <p>div1</p> </div> <div class="div2"> <p>div2</p> </div> <script type="text/javascript"> //获取二个div中的内容 var div1=document.getElementsByClassName("div1")[0]; var div2=document.getElementsByClassName("div2")[0]; //读取内容 console.log(div1.innerHTML); console.log(div2.innerText); //设置div标签中的内容 //覆盖 div1.innerHTML="哈哈哈div1"; div2.innerText="嘿嘿嘿div2"; //区分 //innerHTML可以往标签中添加|读取html节点|再原本内容添加内容 div1.innerHTML+="<h1>我是标题div</h1>"; //innerText只能读取或添加文本内容 div2.innerHTML="哈哈哈哈div2"; </script> </body> </html>
11.属性操作
方法**|**属性 描述 getAttribute() 返回指定元素的属性值 getAttributeNode() 返回指定属性节点 element.id 设置或者返回元素的 id setAttribute() 设置或者改变指定属性并指定值 setAttributeNode() 设置或者改变指定属性节点 element.style 设置或返回元素的样式属性 element.className 设置或返回元素的class属性 element.classList 返回元素的类名
<input type="text" value="加油，胜利就在眼前" id="txt" class="test" />
<br />
性别：<input type="radio" checked="true" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br />
<img src="img/timg.jpg" id="sxtimg" title="sxt" />
<script type="text/javascript">
var txt = document.getElementById("txt");
var sxtimg = document.getElementById("sxtimg");
var sex = document.getElementsByName("sex")[0];
// 获取值
// txt.getAttribute("class")// IE 不支持
// txt.getAttribute("className") //IE支持
// 浏览器兼容操作
var clz = (txt.getAttribute("class") == 'undefined') ? txt.getAttribute("className") : txt.getAttribute("class");
console.log(txt.getAttribute("id") + "-->" + txt.getAttribute("value") + "-->" + clz);
console.log(txt.value); // 获取文本
console.log(sex.checked); // 获取状态是否选中
// 修改值
txt.className = 'test1';
sxtimg.style.display = 'none';
txt.setAttribute("value", "success");
txt.setAttribute("aaa", "000000"); // 自定义属性
console.log(txt.getAttribute("aaa")); // 获取自定义属性值
// 删除属性
txt.removeAttribute("aaa");
console.log(txt.getAttribute("aaa"));
</script>
二、JS-form表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //待页面中的内容全部加载完成之后再去触发这个事件 // window.οnlοad=function(){ // console.log(document.getElementById("box")); // } </script> </head> <body> <form action="" method="" name="myForm" id="box" onsubmit="return haha_onsubmit()"> <p> 名字:<input type="text" name="uname" /> <button type="button" onclick="console.log(form1.uname.value);">测试</button> </p> <p> 性别:<input type="radio" name="gender" value="man">男 <input type="radio" name="gender" value="woman">女 <button type="button" onclick="func_radio()">测试</button> </p> <p> 爱好:<input type="checkbox" name="hobby" value="code" />敲代码 <input type="checkbox" name="hobby" value="play" />打游戏 <input type="checkbox" name="hobby" value="read" />看书 <button type="button" onclick="func_checkbox()">测试</button> </p> <p> 地区:<select name="area" id=""> <option value="1">上海</option> <option value="2">浙江</option> <option value="3">江西</option> <option value="4">广东</option> </select> <button type="button" onclick="func_select()">测试</button> </p> <p> <input type="submit" onclick="return haha_submit()" /> <input type="button" value="按钮" onclick="haha_button()"/> <button>submit</button> </p> <script type="text/javascript"> //获取表单 根据id var form1=document.getElementById("box"); //根据表单nam值 //var form2=document.myForm; //console.log(form2); //获取表单中的元素节点 //id属性，name属性，标签名，class都可以获取 //表单节点.表单元素name属性值 //1.表单元素.value function func_radio(){ console.log(form1.gender.value); } //多选按钮 function func_checkbox(){ var arr=form1.hobby; for(var i=0;i<arr.length;i++){ //多选框中被选中的value值 if(arr[i].checked){ console.log(arr[i].value); } } } //select下拉框 function func_select(){ console.log(form1.area);//整个select console.log(form1.area.options);//所有的下拉列表选项 console.log(form1.area.selectedIndex);//被选中的下拉列表选项的索引 console.log(form1.area.options[form1.area.selectedIndex].value);//value值 console.log(form1.area.options[form1.area.selectedIndex].innerHTML);//标签内容 //获取所有option var arr=form1.area.options; for(var i=0;i<arr.length;i++){ if(arr[i].selected){ console.log(arr[i].index,arr[i].value,arr[i].innerHTML); } } } //submit()提交方法 //表单的提交 //1.button+onclick+submit() function haha_button(){ if(form1.uname.value!=''){ form1.submit(); }else{ console.log("用户名不能为null"); } } //2.submit->onclick->return 函数名;->当点击提交的时候，会 //在提交之前，在调用的函数中，进行校验，如果不满足情况， //就return false->会组织提交按钮的提交 function haha_submit(){ if(form1.uname.value==""){ console.log("用户名不能为null"); return false; } } //3.submit->表单上添加onsubmit事件 //->return 函数名()->函数中不满足情况return false，就不提交 function haha_onsubmit(){ if(form1.uname.value==""){ console.log("用户名必须为6个字符"); return false; } } /* 表单中常用的事件: 焦点事件 失焦 聚焦 键盘事件 鼠标事件 文档事件 window.onload onchange 修改内容并且失焦以后再触发 oninput 输入内容触发 */ form1.uname.oninput=function(){ console.log(111); } form1.uname.onchange=function(){ console.log(456); } </script> </form> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/121477.html
