JavaScript中操作元素

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="嘿嘿";

//把内容当作纯文本输出

//div.innerText=div.innerText+"嘿嘿";

div.innerText+="嘿嘿";

}

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>

<select onchange="ch(this)">

<option value="1">水果1</option>

<option value="2">水果2</option>

<option value="3">水果3</option>

</select>

<textarea id="te" ></textarea>