学习笔记JS进阶语法一DOM进阶
Posted SAP剑客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记JS进阶语法一DOM进阶相关的知识，希望对你有一定的参考价值。
内容整理自《从0到1javascript快速上手》下半部分-进阶语法篇
示例：为元素设置属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bigmimi</title>
<script>
window.onload = function()
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
oBtn.onclick = function()
if (flag)
//为元素设置属性 obj.attr
oPic.src = "img/2.jpg";
flag = false;
else
//为元素设置属性 obj.attr
oPic.src = "img/1.jpg";
flag = true;
;
</script>
</head>
<body>
<input id="btn" type="button" value="变身" /> <br/>
<img id="pic" src="img/1.jpg" />
</body>
</html>
示例：移除最后的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除最后一个</title>
<script>
window.onload = function()
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
var flag = true;
oBtn.onclick = function()
//使用nodeType判断是元素节点还是文本节点
if (oUl.lastChild.nodeType == 3)
oUl.removeChild(oUl.lastChild);
oUl.removeChild(oUl.lastChild);
else
oUl.removeChild(oUl.lastChild);
//使用lastElementChild就不需要判断了
//oUl.removeChild(oUl.lastElementChild);
if (oUl.lastElementChild.innerText == "杨幂")
document.body.innerHTML = '<img class="pic" src="img/1.jpg" style="boder:1px solid silver"/>';
;
;
</script>
</head>
<body>
<ul id="list">
<li>杨幂</li>
<li>古力娜扎</li>
<li>迪丽热巴</li>
<li>关晓彤</li>
<li>杨紫</li>
<li>杨迪</li>
</ul>
<input id="btn" type="button" value="剔除怪物" /> <br/>
</body>
</html>
ps：文章仅供学习娱乐，不代表任何观点。
以上是关于学习笔记JS进阶语法一DOM进阶的主要内容，如果未能解决你的问题，请参考以下文章