<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素内容</title>
<style type="text/css">
h2{ color: red;}
</style>
</head>
<body>
<div id="div1">
<p class="p1"><span>p1</span></p>
<p class="p2">p2</p>
</div>
<input id="username" type="text" name="" id="" value="aaa" />
<script type="text/javascript">
var div1 =document.getElementById('div1');
//查看div1内HTML元素
var strhtml = div1.innerHTML;
//innerHTML:设置或者返回元素标签直接的HTML
console.log(strhtml);
var p1 = document.getElementsByClassName('p1');
console.log(p1[0].innerHTML);
var p2 = document.getElementsByClassName('p2');
console.log(p2[0].innerHTML);
var ps = document.getElementsByTagName('p');
console.log(ps.length);
console.log(ps[0].innerHTML);
console.log(ps[1].innerHTML);
//innerText:设置或者返回元素中去除所有标签的内容
console.log(ps[0].innerText);
console.log(ps[1].innerText);
//对比
console.log("************");
console.log(div1.innerHTML);
console.log("************");
console.log(div1.innerText);
//设置值
ps[0].innerHTML = "段落1";
ps[1].innerHTML = "<h2>段落2</h2>";
div1.innerText = "div元素";
//获取表单中元素的方法
console.log(document.getElementById('username').value);
document.getElementById('username').value = 'ccc';
console.log(document.getElementById('username').value);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素属性</title>
<style type="text/css">
.gray{ background: #ccc;}
#divred{ color: red;}
</style>
</head>
<body>
<div>
test word.
</div>
<script type="text/javascript">
//获得div元素对象
var ele = document.getElementsByTagName('div')[0];
console.log(ele);
//获取当前元素属性的个数
console.log("未操作前属性个数是:"+ele.attributes.length);
//attributes:返回一个元素的属性集合
//为ele添加属性，并查看属性个数
//setAttribute(name,value):设置或者修改指定属性的值
ele.setAttribute('align','center');
ele.setAttribute('title','测试文字');
ele.setAttribute('class','gray');
ele.setAttribute('id','divred');
console.log("添加属性后的属性个数:"+ele.attributes.length);
//获取属性值
//getAttribute(name):返回指定元素的属性值
console.log(ele.getAttribute('title'));
console.log(ele.getAttribute('class'));
//删除ele的title属性
//removeAttribute(name):从元素中删除指定属性
//直接调用就可以
ele.removeAttribute('title');
//查看剩余属性
for (var i=0;i<ele.attributes.length;i++) {
console.log(ele.attributes[i]);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素样式</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: gray;
}
.c{
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box" class="a b">
</div>
<script type="text/javascript">
var box = document.getElementById("box");
box.style.backgroundColor = '#CCC';
box.style.border="solid 1px red";
console.log(box.classList.length);
box.classList.add('c');
box.classList.remove('c');
console.log(box.classList.contains('a'));
console.log(box.classList.contains('d'));
console.log(box.classList.item(0));
console.log(box.classList.item(1));
box.classList.toggle('c');
console.log(box);
</script>
<!--
classList：获取类选择器列表
length:获取元素类名个数
add():给元素添加类名,一次只能添加一个
remove():将元素类名删除，一次只能删除一个
contains():判断元素是否包含指定名称的样式，若包含返回true，否则返回false
item(索引值):根据接收的数字索引参数，获取元素类名
toggle():切换元素样式,若元素之前没有指定名称的样式则添加,如果有则删除
-->
</body>
</html>
