DOM编程
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<script>
//Node 对象
// firstChild
// 描述：返回指定节点的第一个子节点
// lastChild
// 描述：返回指定节点的最后一个子节点
// parentNode
//描述：返回当前节点的
// previousSibling
//描述：返回当前节点的上一个兄弟节点（哥哥）
</script>
//Node 对象
// firstChild
// 描述：返回指定节点的第一个子节点
// lastChild
// 描述：返回指定节点的最后一个子节点
// parentNode
//描述：返回当前节点的
// previousSibling
//描述：返回当前节点的上一个兄弟节点（哥哥）
</script>
<body>
<script>
// nextSibling
// 描述：返回当前节点的下一个兄弟节点（弟弟）
function changeAttr() {
//获取对象
var pEle1 = document.gerElementByid("p")
//以当前对象为基准，找“弟弟”节点
var pEle2 = pEle1.nextSibling.nextSibling
//设置属性
pEle2.setAttribute("align", "center")
}
</script>
<p id="p">段落1</p>
<p>段落2</p>
<input type="button" value="单机我，让第二个段落据居中" on clink="changattr()">
</body></html>
<script>
// nextSibling
// 描述：返回当前节点的下一个兄弟节点（弟弟）
function changeAttr() {
//获取对象
var pEle1 = document.gerElementByid("p")
//以当前对象为基准，找“弟弟”节点
var pEle2 = pEle1.nextSibling.nextSibling
//设置属性
pEle2.setAttribute("align", "center")
}
</script>
<p id="p">段落1</p>
<p>段落2</p>
<input type="button" value="单机我，让第二个段落据居中" on clink="changattr()">
</body></html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<body>
<script>
function changeAttr() {
//获取段落对象
var pEle = document.getElementById("p")
//以段落对象为基准，获取div对象
var divEle = pEle.parentNode
//获取div对象的“弟弟”节点--ul
var ulELe = divEle.nextSibling.nextSibling
//获取ul对象的第一个节点li节点
var liEle = ulELe.firstChild.nextSibling
//控制li节点的属性
liEle.setAttribute('type', 'circle')
}
<script>
function changeAttr() {
//获取段落对象
var pEle = document.getElementById("p")
//以段落对象为基准，获取div对象
var divEle = pEle.parentNode
//获取div对象的“弟弟”节点--ul
var ulELe = divEle.nextSibling.nextSibling
//获取ul对象的第一个节点li节点
var liEle = ulELe.firstChild.nextSibling
//控制li节点的属性
liEle.setAttribute('type', 'circle')
}
</script>
<div>
<p di="p">我是段落1</p>
<p>我是段落2</p>
</div>
<ul>
<li> 我是li1</li>
<li>我是li2</li>
</ul>
<input type="button" value="点击我，控制第一个节点li的类型" />
</body>
<div>
<p di="p">我是段落1</p>
<p>我是段落2</p>
</div>
<ul>
<li> 我是li1</li>
<li>我是li2</li>
</ul>
<input type="button" value="点击我，控制第一个节点li的类型" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<script>
function replaceElement() {
//1.创建图像节点
var imageEle = document.createElement("img")
//2.设置图像属性
imageEle.setAttribute("src", "5452164_091918765108_2[1].jpg")
//3.获取段落节点
var pEle = document.getElementById("p")
document.body.replaceChild(imageEle, pEle)
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<script>
function replaceElement() {
//1.创建图像节点
var imageEle = document.createElement("img")
//2.设置图像属性
imageEle.setAttribute("src", "5452164_091918765108_2[1].jpg")
//3.获取段落节点
var pEle = document.getElementById("p")
document.body.replaceChild(imageEle, pEle)
}
</script>
<body>
<p>111</p>
<p id="p">我的是段落</p>
<p>2222</p>
<input type="button" value="点击我，可以将段落换成图片" onclick="replaceElement()">
</body>
<p>111</p>
<p id="p">我的是段落</p>
<p>2222</p>
<input type="button" value="点击我，可以将段落换成图片" onclick="replaceElement()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 编程</title>
</head>
<script>
// document 对象
// getElementsByTagName()
//描述：获取文档中指定的标记名称所形成的集合(数组)
function getParagraphNum() {
//获取文档中由P标记形成的集合(数组)
var pEles = document.getElementsByTagName("p")
var count = pEles.length;
console.log(count)
}
</script>
<meta charset="UTF-8">
<title>DOM 编程</title>
</head>
<script>
// document 对象
// getElementsByTagName()
//描述：获取文档中指定的标记名称所形成的集合(数组)
function getParagraphNum() {
//获取文档中由P标记形成的集合(数组)
var pEles = document.getElementsByTagName("p")
var count = pEles.length;
console.log(count)
}
</script>
<body>
<p>段落1</p>
<P>段落2</P>
<div>
<h1>标题1</h1>
<p>段落2</p>
<h2>标题3</h2>
</div>
<p>段落1</p>
<P>段落2</P>
<div>
<h1>标题1</h1>
<p>段落2</p>
<h2>标题3</h2>
</div>
<input type="button" value="单机我，统计页面中的段落的数量" onclick="getParagraphNum()">
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<script>
// document 对象
function removeAllPargraph() {
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程</title>
</head>
<script>
// document 对象
function removeAllPargraph() {
var pEles = document.getElementsByTagName("p")
for (var n = 0; n < pEles.length; n++) {
pEles[n].parentNode.removeChild(pEles[n])
n--
for (var n = 0; n < pEles.length; n++) {
pEles[n].parentNode.removeChild(pEles[n])
n--
}
}
</script>
</script>
<body>
<p>段落1</p>
<P>段落2</P>
<div>
<h1>标题1</h1>
<p>段落2</p>
<h2>标题3</h2>
</div>
<p>段落1</p>
<P>段落2</P>
<div>
<h1>标题1</h1>
<p>段落2</p>
<h2>标题3</h2>
</div>
<input type="button" value="单机我，可以删除页面内的所有段落" onclick="removeAllPargraph()">
</body></html>
</body></html>
