Python学习 Day 046 - DOM 操作二

最新推荐文章于 2023-01-29 00:53:49 发布

转载最新推荐文章于 2023-01-29 00:53:49 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wcx666/p/9936471.html

本文深入解析了JavaScript中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 操作 二

Python学习 Day 046 - DOM 操作二