【学习笔记】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.attroPic.src = "img/2.jpg";flag = false;}else{//为元素设置属性 obj.attroPic.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进阶相关推荐

【学习笔记】JS进阶语法一DOM基础
内容整理自<从0到1Javascript快速上手>下半部分-进阶语法篇 getElementById() 和 getElementsByTagName()区别: 1. getElemen ...
前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介新建步骤 <body ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
Java快速入门学习笔记6 | Java语言中的for循环语句
有人相爱,有人夜里开车看海,有人却连LeetCode第一题都解不出来!虽然之前系统地学习过java课程,但是到现在一年多没有碰过Java的代码,遇到LeetCode不知是喜是悲,思来想去,然后清空自己 ...
Java快速入门学习笔记5 | Java语言中的while循环语句
有人相爱,有人夜里开车看海,有人却连LeetCode第一题都解不出来!虽然之前系统地学习过java课程,但是到现在一年多没有碰过Java的代码,遇到LeetCode不知是喜是悲,思来想去,然后清空自己 ...
Java快速入门学习笔记4 | Java语言中的if条件语句
有人相爱,有人夜里开车看海,有人却连LeetCode第一题都解不出来!虽然之前系统地学习过java课程,但是到现在一年多没有碰过Java的代码,遇到LeetCode不知是喜是悲,思来想去,然后清空自己 ...
JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
【学习笔记】JS进阶语法一document对象
内容整理自<从0到1Javascript快速上手>下半部分-进阶语法篇示例:write()方法和writeln()方法区别 <!DOCTYPE html> <html& ...
【学习笔记】JS进阶语法一window对象
内容整理自<从0到1Javascript快速上手>下半部分-进阶语法篇示例:打开/关闭新窗口 <!DOCTYPE html> <html><head> ...

【学习笔记】JS进阶语法一DOM进阶

【学习笔记】JS进阶语法一DOM进阶相关推荐

最新文章

热门文章