<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//onload 页面加载事件，在页面加载完成后自动触发,触发时调用此匿名函数
//alert(1);
window.onload = function() {
//alert(2);
//1.读写节点
//1.1读取节点的名称、类型
var p1 = document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType)
//1.2读写节点内容 双标签中间的文本叫内容<a>百度</a>
//1)innerHTML(含子标签)
console.log(p1.innerHTML);
p1.innerHTML = "1.<u>读写</u>节点"
//2)innerText(忽略子标签)
var p2 = document.getElementById("p2");
console.log(p2.innerText)
p2.innerText = "2.<u>读写</u>节点"
//1.3读写节点的值
//表单控件中的数据叫值，只有表单控件才有值:input,select,textarea
var b1 = document.getElementById("b1");
console.log(b1.value);
b1.value = "ANNIU";
//1.4读写节点的属性
//1)通过读写属性
var img=document.getElementById("il");
console.log(img.getAttribute("src"));
img.setAttribute("src", "../images/02.jpg");
//img.removeAttribute("src");
//2)通过标准的属性名读写属性
var p6=document.getElementById("p6");
console.log(p6.style.color);
//3)通过不标准属性名读写属性只有高版本浏览器支持
}
</script>
</head>
<body>
<p id="p1">
1.<b>读写</b>节点
</p>
<p id="p2">
2.<b>查询</b>节点
</p>
<p id="p3">
3.<b>增删</b>节点
</p>
<p>
<input type="button" value="按钮" id="b1">
</p>
<p>
<img src="../images/01.jpg" id="il">
</p>
<p id=p6 style="color: red">
标准的属性就那么几个
</p>
</body>
</html>