html head meta charset ="utf-8" title Dom操作 / title script type ="text/javascript" src ="08.16/08.16.js" / script / head body !-- dom节点添加 删除 ; createElemen 创建一个新的节点 appendChild(newNode) 将newNode添加成当前
<html> <head> <meta charset="utf-8"> <title>Dom操作</title> <script type="text/javascript" src="08.16/08.16.js"></script> </head> <body> <!--dom节点添加 删除 ; createElemen 创建一个新的节点 appendChild(newNode) 将newNode添加成当前节点的最后一个子节点 insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点 replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点 removeChild(oldNode) 将oldNode子节点删除 cloneNode(true // false) 当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点 --> <form id="myform" action="https://www.baidu.com/" method="get" target="_blank"> <input name="username" type="text" value="张三"><br> <input name="password" type="text" value="123"><br> <select name="city"> <option value="shanghai">上海</option> <option value="beijing" selected>北京</option> </select><br> <input type="button" value="获取表单内第一个控件" onClick="alert(document.getElementById(‘myform‘).elements[0].value);"> <input type="button" value="获取表单内第二个控件" onClick="alert(document.getElementById(‘myform‘).elements[‘password‘].value);"> <input type="button" value="获取表单内第三个控件" onClick="alert(document.getElementById(‘myform‘).city.value);"> <input type="button" value="操作表单" onClick="operatorForm()"> </form> </body> </html>
<html> <head> <meta charset="utf-8"> <title>Dom操作内容</title> <style> #in_divall{ background-color: antiquewhite; } </style> </head> <body> <!-- 操作内容 表单； 赋值；标签对象.value=""； 取值；标签对象.value 非表单； 取值； innerHTML返回的是标签内的HTML内容.包含HTML标签 innerText返回的诗标签内的文本值不包含HTML标签 操作属性 标签对象.getAttribute （’属性名‘） 获取指定属性的值 return返回值 标签对象.setAttribute(‘属性名‘，‘属性值’)设置修改获取属性的值 标签对象.removeAttribute（‘属性名‘） 删除制定属性 操作样式（只能操作内联 姐就是行内） 标签对象.style.样式名（获取样式名的值） 标签对象.style.样式名（获取样式名的值）=样式值 --> <input type="text" id="ueser" value=""> <button onClick="huiqu()">提交</button> <button onClick="fuzhi()">赋值</button> <div id="fei_div" style="width: 200px;height: 100px;background-color: aquamarine;">这是表单获取的值。 </div> <p id="p_span"><span>这是一个嵌套标签</span></p> <a href="#" target="_self" id="a_in" onClick="getAtr()">这是一个A连接</a> <div id="in_divall" onClick="div_click()" style="width: 500px;height: 100px;"></div> <button onClick="div_huiqu()">提交</button> <button onClick="div_fuzhi()">赋值</button> </body> </html> <script> function div_click(){ // 获取DIV的宽度 var div_style = document.getElementById(‘in_divall‘); var ststylecolor =div_style.style.width; console.log(stylecolor); div_style.style.width = 1000px; div_style.style.backgroundColor = red; } function getAtr(){ var aaa=document.gatElementById(‘a_in‘); //获取属性 属性名 // console.log(aaa.getAttribute(‘type‘)); // 设置属性 属性名+属性值 // var setAtr = aaa.getAttribute(‘target‘,‘_blank‘); // 删除属性 属性名 var remAtr = aaa.removeAttribute(‘id‘); } //表单获取值 function huoqu(){ // 一.首先要获取到输入框 var ueser = document.getElementById(‘ueser‘); // 二.获取值 console.log(ueser.value); } //表单赋值 function fuzhi(){ // 一.首先要获取到输入框 // 二.赋值 document.getElementById(‘ueser‘).value=‘李四‘; } // 非标单获取值 function div_huoqu(){ // 一。获取输入框的值 var dicy = document.getElementById(‘p_span‘); console.log(dicy.innerText); } //非标单赋值 function div_fuzhi(){ var dicy = document.getElementById(‘fei_div‘); console.log(dicy.innerHTML ="这是新的表单获取值"); } </script>