您的位置：首页 > Web前端 > JavaScript

JavaScript基础（补充）个人笔记

2017-08-16 19:05 381 查看

JS之层次和节点

层级关系

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级关系</title>
</head>
<body>

<!--元素不换行的样式-->
<!--<ul id="ul"><li>青岛理工</li><li id="li2">山东科技</li><li>清华大学</li></ul>-->

<ul id="ul">
<li>青岛理工</li>
<li id="li2" class="">山东科技</li>
<li>清华大学</li>
</ul>
</body>
<script>

/*parentNode:通过子元素获取父元素*/
var li2 = document.getElementById("li2");
var ul = li2.parentNode;
console.log(ul);

/*childNodes:通过父元素去查找所有的子元素,
有bug，元素和元素之间不允许换行*/
var ul = document.getElementById("ul");
var lis = ul.childNodes;
console.log(lis);

/*firstChild：通过父元素去查找第一个子元素
*             有bug，元素和元素之间不允许换行
* firstElementChild:通过父元素去查找第一个子元素，
*                   允许元素换行*/
var ul = document.getElementById("ul");
//    var li1 = ul.firstChild;
var li1 = ul.firstElementChild;
console.log(li1);

/*lastChild：通过父元素去查找最后一个子元素
*             有bug，元素和元素之间不允许换行
* lastElementChild:通过父元素去查找最后一个子元素，
*                   允许元素换行*/
var ul = document.getElementById("ul");
//    var li1 = ul.lastChild;
var li1 = ul.lastElementChild;
console.log(li1);

var li2 = document.getElementById("li2");
//    var li1 = li2.previousSibling;                /*获取前一个同级节点*/
var li1 = li2.previousElementSibling;
/*无bug*/
//    var li3 = li2.nextSibling;                    /*获取后一个同级节点*/
var li3 = li2.nextElementSibling;
/*无bug*/
console.log(li1);
console.log(li3);

</script>
</html>

创造和增加节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创造和增加节点</title>
</head>
<body>
<img src="../../../img/f3_Android1.png" alt="" id="oldImg">
<button onclick="create()">新增图片</button>
<button onclick="clone()">复制图片</button>
</body>
<script>
/*创造和增加节点*/
function create() {
var newImg = document.createElement("img");
newImg.src = "../../../img/f3_Android2.png";
var oldImg = document.getElementById("oldImg");
document.body.insertBefore(newImg, oldImg);
}
function clone() {
var oldImg = document.getElementById("oldImg");
var newImg = oldImg.cloneNode(false);
document.body.appendChild(newImg);
}
</script>
</html>

remove和replace

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>remove和replace节点</title>
</head>
<body>
<button onclick="remove()">删除图片</button>
<button onclick="replace()">替换图片</button>
<img src="../../../img/f3_Android1.png" alt="" id="img1">
</body>
<script>
function remove() {
var img = document.getElementById("img1");
document.body.removeChild(img)
}
function replace() {
var img = document.getElementById("img1");
var newImg = document.createElement("img");
newImg.src = "../../../img/f3_Android3.png";
document.body.replaceChild(newImg, img);                 //用newImg替换img
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 层级和节点

相关文章推荐

新的分享

章节导航

JavaScript基础（补充） 个人笔记

JS之层次和节点

JavaScript基础（补充）个人笔记