HTML 的属性操作：读、写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS属性操作</title> <script> /* HTML 的属性操作：读、写 属性名： 属性值： 读操作：获取、找到 元素.属性名 写操作：“添加”、替换、修改 元素.属性名 = 新的值 */ window.onload = function(){ // 获取元素 var oText = document.getElementById('text1'); var oSelect = document.getElementById('select1'); var oBtn = document.getElementById('button1'); // alert(oBtn.value); // '按钮' // alert( oText.value ); // alert( oSelect.value ); // 字符串连接 // oText.value oSelect.value // '张三' + '北京' => '张三北京' // '张三' + '在' + '北京' => '张三在北京' oBtn.onclick = function(){ alert(oText.value + '在' + oSelect.value); }; }; </script> </head> <body> <input type="text" id="text1"> <select name="" id="select1"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </select> <input type="button" id="button1" value="按钮" /> </body> </html>
读操作：获取、找到
元素.属性名
写操作：“添加”、替换、修改
元素.属性名 = 新的值
innerHTML操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML</title> </head> <script> /* oP.innerHTML => 读取p里面所有的html代码 oP.innerHTML = 123; => 替换p里面所有的html代码 */ window.onload = function(){ // 获取元素 var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn1'); var oP = document.getElementById('p'); oBtn.onclick = function(){ oP.innerHTML = oText.value; oText.value = ''; }; }; </script> <body> <input type="text" id="text1"> <input type="button" value="按钮" id="btn1"> <p id="p">这是一段文字</p> </body> </html>
oP.innerHTML => 读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码