美文网首页
Bom 对象和Dom树

Bom 对象和Dom树

作者: 樊小勇 | 来源:发表于2019-03-25 10:16 被阅读0次

通过获取设备信息来进行跳转页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        function isMobile() {
            var ua = navigator.userAgent;
            var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
            var isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
            var isAndroid = ua.match(/(Android)\s+([\d.]+)/);
            return ipad || isIphone || isAndroid;
        }
        if (this.isMobile()) {
            location.href = "phone.html";
        } else {
            location.href = "pc.html";
        }

    </script>
</head>
<body>
</body>
</html>

添加标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ol></ol>
    <button onclick="addEle();">添加li</button>

    <script>
        function addEle() {
            var $ol = document.querySelector('ol');
            // 1. 创建元素节点
            var $li = document.createElement('li');
            // 2. 给标签填充内容
            $li.innerText = 222222;
            // 3. 把$li标签添加到ol里面
            $ol.appendChild($li);
        }

    </script>
</body>

</html>
  • 删除标签
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>btn</button>


    <script>
        var $btn = document.querySelector('button');
        $btn.remove();

    </script>
</body>

</html>
  • 修改标签的属性和class
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
        }

        .dsn {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        我是div表亲啊
    </div>

    <button id="btn1">该内容</button>
    <button id="btn2">显示或隐藏</button>
    <button id="btn3">修改属性</button>

    <script>
        var $box = document.querySelector(".box");
        // 修改内容
        document.querySelector("#btn1").onclick = function () {
            $box.innerHTML = "222222";
        };
        // 修改class
        document.querySelector("#btn2").onclick = function () {
            var className = $box.className;
            console.log(className);
            if (className === "box") {
                $box.className = "box dsn";
            } else {
                $box.className = "box";
            }
        };

        // 修改属性
        document.querySelector("#btn3").onclick = function () {
            $box.style.backgroundColor = "gray";
        };
    </script>
</body>

</html>
  • jquery 实现显示或隐藏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
        }

        .dsn {
            visibility: hidden;
        }
    </style>
</head>

<body>

    <div class="box">
        我是div表亲啊
    </div>

    <button id="btn2">显示或隐藏</button>

    <script>
        $('#btn2').click(function () {
            var $box = $('.box');
            $box.toggleClass('dsn');
        })

    </script>
</body>

</html>

相关文章

  • Bom 对象和Dom树

    通过获取设备信息来进行跳转页面 添加标签 删除标签 修改标签的属性和class jquery 实现显示或隐藏

  • javascript的BOM和DOM笔记

    BOM和DOM编程: BOM(BOM(browser object model)浏览器对象模型 DOM(docum...

  • 浏览器

    BOM对象模型 跨域相关问题 浏览器渲染 1、构建 dom 树和 csscom2、生成渲染树:从DOM树的根节点开...

  • 06-BOM+DOM+事件

    一.BOM 1.BOM介绍 2.BOM中的对象和方法 二.DOM 1.DOM的概念 2.DOM节点分类 3.DOM...

  • DOM 对象和 BOM 对象

    DOM对象 1. DOM 简介 DOM (Document Object Model)是 W3C 的标准,是指文档...

  • DOM和BOM、window 和 document

    1. BOM 和 DOM BOM (Browser Object Module),浏览器对象模型,是为了操作浏...

  • JS语法基础(一)

    Javascript组成:ECMAScript,DOM,BOM; ECMAScript:核心语法 DOM:文档对象...

  • DOM和BOM

    DOM和BOM 参考 DOM与BOM 和 BOM和DOM详解 javascript 有三部分构成:ECMAScr...

  • 14、BOM知识点总结

    BOM对象: window|__ Document 文档对象 (DOM)||__ frames 框架集||__...

  • DOM和BOM、window和document

    记录以下内容 1. BOM和DOM BOM(Browser Object Module), 浏览器对象模型, 是为...

网友评论

      本文标题:Bom 对象和Dom树

      本文链接:https://www.haomeiwen.com/subject/kvzmvqtx.html