Python学习 Day 046 - DOM 操作二

主要内容:

1.DOM的操作(创建,追加,删除)
2.js中的面向对象
3.定时器

1. DOM的操作(创建,追加,删除)

(1)DOM节点的获取

parentNode 获取父级标签
nextElementSibling 获取下一个兄弟节点
children 获取所有的子标签

    <script>var oP = document.getElementById("wuxia");console.log(oP.parentNode); // 父级div标签下的所有内容console.log(oP.nextElementSibling.innerText);  //萧峰console.log(oP.nextSibling.innerText); // IE浏览器var a = oP.nextElementSibling|| oP.nextSibling;console.log(a);console.log(oP.parentNode.childen);</script>

(2) DOM的增删操作

创建 createElement()

//既可以创建已有的标签,还可以创建自定义的标签
var oDiv = document.createElement('div')

追加 appendChild() 父子标签操作

父.appendChild(oDiv);

删除 removeChild()

父.removeChild(子节点);
自己.parentNode.removeChild(自己)

插入insertBefore()

父.insertBefore(新的子节点,要参考的节点)

利用创建删除实现隐藏代码示例

    <script>var oBtn = document.querySelector("#btn");var oDel = document.querySelector("#del");var oFather = document.querySelector(".father");var oP = null;var oA = null;oBtn.onclick = function(){//创建 dom p标签oP = document.createElement("p");oA = document.createElement("a");//追加到父级标签中
            oFather.appendChild(oP);oFather.insertBefore(oA,oP);//设置对象属性值oA.href = 'http://www.baidu.com';//设置值oA.innerText="百度";oP.innerHTML = "alex";oP.setAttribute("class","active")};oDel.onclick = function(){//如果oP对象存在就结束程序if (!oP){return;//
            }else{console.log(oFather);//将增加的p标签移出
                oFather.removeChild(oP)}}</script>

(3) 网页中显示隐藏性能消耗问题

1.可以通过控制元素的类名或者是style属性,对元素进行显示隐藏好处: 可以在网页中频繁性的切换,主要控制的是display:none|block;坏处: 文档初始化会有渲染开销,但是这点开销不算什么.
2.通过DOM操作 appendChild和removeChild 对元素显示隐藏好处:文档初始化的时候不会产生渲染开销坏处: 不要在网页中做频繁性的切换,会产生性能消耗

(4)使用js模拟hover选择器

    <title>Title</title><style>*{padding: 0;margin: 0;}ul{list-style: none;}ul{width: 600px;height: 80px;line-height: 80px;text-align:center;overflow:hidden;}ul li{float:left;margin: 0 10px;width:  80px;height: 80px;background: darkturquoise;color: #fff;}ul li.active{background: red;}</style>
</head>
<body>
<ul><li>举</li><li>头</li><li>望</li><li>明</li><li>月</li>
</ul>
<script>var lists = document.getElementsByTagName("li");for(var i =0;i<lists.length;i++){lists[i].onclick = function(){//在修改当前盒子样式之前,现将所有盒子的类名置空for(var j=0; j<lists.length;j++){lists[j].className ="";}this.className = "active"; //修改当前 鼠标进入盒子的样式
        }}
</script>

(5)选项卡

    <title>Title</title><style>*{padding: 0;margin: 0;}ul{list-style: none;}#tab{width: 480px;margin: 20px auto;border: 1px solid red;}ul{width: 100%;overflow: hidden;}ul li{float: left;width: 160px;height: 60px;line-height: 60px;text-align: center;background-color: #cccccc;}ul li a{text-decoration: none;color:black;}li.active {background-color: darkcyan;}p{display: none;height: 200px;text-align: center;line-height: 200px;background-color: darkgrey;}p.active{display: block;}</style>
</head>
<body>
<div><div id="tab"><ul><li class = "active"><a href="javascript:void(0);">首页</a></li><li class = "active"><a href="javascript:void(0);">新闻</a></li><li class = "active"><a href="javascript:void(0);">图片</a></li></ul><p class="active">首页内容</p><p>新闻内容</p><p>图片内容</p></div>
</div><script>var lists = document.getElementsByTagName("li");var oPs = document.getElementsByTagName("P");// var i;//i=3 变量提升 会导致 变量 是一个全局作用域//var 声明变量 全局作用域,存在变量提升for(var i= 0; i<lists.length;i++){ //为了给每个dom添加事件lists[i].currentIndex = i;console.dir(lists[i]);lists[i].onclick = function(){for(var j = 0; j<lists.length;j++){lists[j].className = "";oPs[j].className = '';}this.className = "active";oPs[this.currentIndex].className = 'active'}}
</script>

注意;变量提升问题

<script>// var a;// //变量提升// console.log(a);//undefined// a = 1;// console.log(a);
    console.log(a);{var a = 2;}console.log(a);// let声明的变量 1 块级作用域 2.不存在变量提升console.log(b); //找不到,不存在
    {let b= 3;}console.log(b)
</script>

变量提升

通过es6中的let来解决变量提升

<script>var lists = document.getElementsByTagName("li");var oPs = document.getElementsByTagName("P");// var i;//i=3 变量提升 会导致 变量 是一个全局作用域//var 声明变量 全局作用域,存在变量提升for(let i= 0; i<lists.length;i++){ //为了给每个dom添加事件
        console.dir(lists[i]);lists[i].onclick = function(){for(var j = 0; j<lists.length;j++){lists[j].className = "";oPs[j].className = '';}this.className = "active";oPs[i].className = 'active'}}
</script>

2.js中的面向对象

(1)使用Object或对象字面量创建对象

// 构造函数方式创建对象let person = new Object();person.name = 'alex';person.fav = function () {console.log(this);}//字面量方式创建 使用最多var person2 = {name:'wusir',age:19,fav:function () {alert(this.age);}}person2.fav();

(2)工厂模式创建对象

 function createPerson(name, age) {let person = new Object();person.name = name;person.age = age;person.fav = function () {console.log(this);}return person;}function createFruit(name, age) {let fruit = new Object();fruit.name = name;fruit.age = age;fruit.fav = function () {console.log(this);}return fruit;}var p1 = createPerson('alex',17);var f1 = createFruit('桃子',1);console.log(p1 instanceof Object);console.log(f1 instanceof Object);

(3)构造函数模式创建对象

function Person(name,age){this.name = name;this.age = age;this.fav = function () {alert(this.name)}}function Fruit(name,age){this.name = name;this.age = age;this.fav = function () {alert(this.name)}}
//    创建对象 使用new关键字var p1 = new Person('alex',17);var f1 = new Fruit('桃子',17);console.log(p1 instanceof Object);console.log(f1 instanceof Object);console.log(p1 instanceof Person);console.log(f1 instanceof Fruit);

(4)原型模式创建对象

function Person(name,age){this.name = name;this.age = age;
}
Person.prototype.fav = function () {console.log(this.name);
}
let p1 = new Person('alex',16);
let p2 = new Person('alex',16);p1.fav();//es6 使用class关键字来创建对象
class Furit{//初始化的构造器方法constructor(name='alex',age=16){this.name = name;this.age = age}//对象的单体模式 等价于fav:function(){}
    fav(){console.log(this.age);}
}var f1 =  new Furit();
f1.fav();

es6的用法:
1.模板字符串  `` 变量名使用${}
2.class 类的概念
3.箭头函数 ()=>3  等价于 function(){ return 3}

3.定时器

转载于:https://www.cnblogs.com/wcx666/p/9936471.html

Python学习 Day 046 - DOM 操作二相关推荐

jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
少儿编程Scratch学习教程5--基本操作(二)动画例子
本篇介绍下动画相关例子 1.表情的转换首先创建一个精灵角色之后在外观选项中,选择"将造型切换为...",这样就可以在特定情况下就可以更换造型了添加一个事件,当按下" ...
Python学习基础笔记三十二——正则表达式
官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特殊字符.及这些特定字符的组合,组成一个"规则字符串",这个规则字符串用来表达对字符串的一种过滤逻辑. 1. ...
Python学习笔记之字典（二）
遍历字典:一个Python字典可能包含很多个键值对,在需要获取其数据时,就需要对这个进行遍历,Python支持对字典遍历.字典可用于以各种方式存储信息,其中有多种遍历字典的方式:可遍历字典的所有键值对 ...
python学习笔记之数据类型（二）
上一篇博客,小波介绍了python的入门和简单流程控制,这次写python的数据类型和各种数据类型的内置方法. 一.数据类型是何方神圣? 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当 ...
Python学习笔记（基础知识点二）开更了~
下午有事忙活了几个小时现在开始开更啦. 首先想说那个一直困惑我的问题得以解决了.是什么呢??? 八进制是以数字0开头,也就是12=015(后面是八进制):十六进制是以数字0加上字母x(大写小写都可以, ...
Python学习---Django的基础操作180116
Django创建数据库操作 django流程之model实例 settigs.py:更改Django2.0.1的配置,更新为之前的路径配置 'DIRS': [os.path.join(BASE_DIR ...
Python学习笔记之函数（二）
一.函数返回值 1.什么是返回值:函数返回的值被称为返回值.在函数中,可使用return语句将值返回到调用函数的代码行.这样,我们可以在函数方法体下实现一些小模块的功能,并返回,从而简化主程序的代码. ...
Python学习笔记之列表（二）
1.修改列表元素: 修改元素列表,可指定列表名和要修的元素的索引,再指定该元素的新值,示例代码如下: #修改列表示例 names = ['amy','john','jenny','sunny','h ...

Python学习 Day 046 - DOM 操作二

Python学习 Day 046 - DOM 操作二相关推荐

最新文章

热门文章

Python学习 Day 046 - DOM 操作 二

Python学习 Day 046 - DOM 操作 二相关推荐

最新文章

热门文章

Python学习 Day 046 - DOM 操作二

Python学习 Day 046 - DOM 操作二相关推荐