1 DOM操作元素的属性
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function demo1(){ //获得元素对象 var inp=document.getElementById("zh"); //获得对象的属性 inp.value：获得的是实时输入的值不是默认的值 console.log(inp.type+"---"+inp.name+"---"+inp.value); //操作元素对象的属性 inp.type="button"; inp.value="测试1"; } </script> </head> <body> <input type="button" name="" id="" value="操作元素的属性" onclick="demo1()" /> <hr /> <input type="text" name="zh" id="zh" value="123" /> </body> </html> |
2 DOM操作元素内容
2.1获得元素内容
单标签获得值得时候使用value属性
双标签获得时候使用的是innerHTML 或者innerText
双标签的特殊情况(value)
Select textarea
取值的时候使用value属性
赋值的时候使用innerHTML或者innerTest即可
2.2代码实现
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function demo1(){ //获得div的对象 var div =document.getElementById("div1"); // 文本和HTML的标签 var inn=div.innerHTML; console.log(inn); //输出的是纯文本 var inn2=div.innerText; console.log(inn2); //操作内容 可以识别HTML标签的 //div.innerHTML="<b>嘿嘿</b>"; //把内容当作纯文本输出 //div.innerText=div.innerText+"<b>嘿嘿</b>"; div.innerText+="<b>嘿嘿</b>"; } function ch(th){ alert(th.value); } function test(){ //获得多行文本的对象 var te=document.getElementById("te"); //取值问题 alert(te.value); //赋值操作 te.innerHTML="sxt"; } </script> </head> <body> <input type="button" name="" id="" value="元素内容测试" onclick="test()"/> <hr /> <div id="div1"> <span>人到中年不由己，保温杯里泡枸杞</span> </div> <!-- this:代表当前选择的对象--> <select onchange="ch(this)"> <option value="1">水果1</option> <option value="2">水果2</option> <option value="3">水果3</option> </select> <textarea id="te" ></textarea> </body> </html> |