<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
</head>
<body>
<p id="p1">1.<b>读写</b>节点</p>
<p id="p2">2.<b>查询</b>节点</p>
<p id="p3">3.<b>增删</b>节点</p>
<p id="p4">
<img src="../images/1.jpg" id="i1"/>
</p>
<p>
<a href="http://www.baidu.com" id="a1">百度</a>
</p>
<script>
//1.读取节点的名称和类型
//元素节点和属性节点，返回标签或属性名称
var p1=document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
//2.读写节点的内容(<p>这里是内容</p>)
//innerHTML:支持子标签
console.log(p1.innerHTML);
p1.innerHTML="1.<u>读写</u>节点";
//innerText:不支持子标签
var p2=document.getElementById("p2");
console.log(p2.innerText);
p2.innerText="2.<u>查询</u>节点";//修改节点
//3.1读写节点属性
var img=document.getElementById("i1");
console.log(img.getAttribute("src"));//读取属性
img.setAttribute("src","../images/2.jpg");//改属性
img.removeAttribute("src");//删除属性
//3.2新的API(低版本浏览器不支持)
//节点.属性名(class除外，写成className)
//注意 :节点.style/节点.className是标准的
var a=document.getElementById("a1");
console.log(a.href);
//4.读写表单控件的值input.value
</script>
</body>
</html>
3216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
