JS之DOM

Posted 哈喽杏红

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS之DOM相关的知识，希望对你有一定的参考价值。

SCREEN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screen</title>
</head>
<body>

</body>
<script>
    console.log(screen.width);/*屏幕宽度*/
    console.log(screen.height);
    console.log(screen.availWidth);/*屏幕可用宽度*/
    console.log(screen.availHeight);
</script>
</html>

 

 

LOCATION

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
</head>
<body>
<button onclick="assign()">加载新页面</button>
<button onclick="replace()">替换页面</button>
<button onclick="reload1()">刷新页面</button>
<button onclick="reload2()">彻底刷新页面</button>
</body>
<script>
    function assign() {
        /*可以返回老页面*/
        location.assign("http://www.baidu.com");
    }
    function replace() {
        /*不可以返回老页面*/
        location.replace("http://www.baidu.com");
    }
    function reload1() {
        location.reload();
    }
    function reload2() {
        location.reload(true)
    }
</script>
<!---->
<script>
    console.log(location.href);
    /*完整的url*/
    console.log(location.protocol);
    /*协议*/
    console.log(location.port);
    /*端口号*/
    console.log(location.hostname);
    /*主机名称*/
    console.log(location.pathname);
    /*路径名称*/
    console.log(location.search);
    /*？后的数据部分*/
</script>
</html>

 

 

HISTORY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
</head>
<body>
<h1>45</h1>
<a href="Demo46.html">Demo46</a>
<button onclick="forward()">下一个页面</button>
</body>
<script src="../../js/history.js"></script>
</html>

DEMO46

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页1</title>
</head>
<body>
<h1>46</h1>
<a href="Demo47.html">Demo47</a>
<button onclick="back()">上一个页面</button>
<button onclick="forward()">下一个页面</button>
<button onclick="go(-1)">shang一个页面</button><!--与back同效-->
<button onclick="go(1)">xia一个页面</button><!--与forward同效-->
</body>
<script src="../../js/history.js"></script>
</html>

DEMO47

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页2</title>
</head>
<body>
<h1>47</h1>
<a href="Demo48.html">Demo48</a>
<button onclick="back()">上一个页面</button>
<button onclick="forward()">下一个页面</button>
</body>
<script src="../../js/history.js"></script>
</html>

DEMO48

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页3</title>
</head>
<body>
<h1>48</h1>
<a href="Demo48.html">Demo48</a>
<button onclick="back()">上一个页面</button>
</body>
<script src="../../js/history.js"></script>
</html>

 

 

Confirm

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>confirm</title>
</head>
<body>

</body>
<script language="javascript" type="text/javascript">
    var flag = confirm("确认要删除此条信息吗？");
    if (flag) {
        alert("删除成功");
    } else {
        alert("取消删除");
    }
</script>
</html>

 

 

navigator

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigator</title>
</head>
<body>
<button onclick="close1()"></button>
</body>
<script>
    console.log(navigator.appName);
    console.log(navigator.appVersion);
    console.log(navigator.userAgent);
    console.log(navigator.platform);
    function close1() {
        window.close1();
    }
</script>
</html>

 

 

 

练习之页面转换-鲜花

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鲜花</title>
</head>
<body>
<button onclick="detail()">鲜花详情</button>
<button onclick="refresh()">刷新当钱页面</button>
</body>
<script>
    function detail() {
        location.href="Demo50.html";
    }
    function refresh() {
//        location.reload();
        location=location;/*同上一样都是刷新效果*/
    }
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鲜花详情</title>
</head>
<body>
<p>bumai</p>
<button onclick="back()"></button>
</body>
<script>
    function back() {
        location.href = "Demo49.html"
    }
</script>
</html>

 

 

OPEN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OPEN</title>
</head>
<body>
<button onclick="openNewPage()">打开鲜花页面</button>
</body>
<script>
    function openNewPage() {
        window.open("Demo49.html", "xianhua", "height=300,width=500,left=50,top=100")
    }
</script>
</html>

 

 

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<button onclick="show()">五秒后显示helloworld</button>
<button onclick="cancelShow()">取消显示helloworld</button>
<button onclick="cancelShow2()">停止显示helloworld</button>
</body>
<script>
    //setTimeout            默认情况下，只会执行一次
    var hello;
    function show() {
        hello = setTimeout(function () {
            alert("HelloWorld!");
        }, 5000);                                       //5000=5000ms
    }
    function cancelShow() {
        clearTimeout(hello);
    }
</script>
<script>
    /*setinterval   根据指定的时间，循环执行*/
    var hello2 = setInterval(function () {
        console.log("HelloWorld!")                     //console在控制台看变化
    }, 1000)
    function cancelShow2() {
        clearTimeout(hello2);
    }
</script>
</html>

 

 

getelement系列方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getelement系列方法</title>
</head>
<body>
<p id="jereh">杰瑞集团</p>
<p name="jredu">杰瑞教育</p>
<p name="jredu">杰瑞教育</p>
<button onclick="change()">变字体颜色！！</button>
<button onclick="change2()">字体变大！！</button>
<button onclick="change3()">全部字体变大！！</button>
</body>
<script>
    /*getElementById    通过id查找元素，只会返回一个匹配的元素*/
    function change() {
        document.getElementById("jereh").style.color = "red";
    }
    /*getElementByClassName     通过class查找元素，只会返回一个匹配的元素数组*/
    /*function change2() {
        var result = document.getElementsByClassName("jredu");
        //用这个函数就把上边杰瑞教育name改成class
        for (var i = 0; i < result.length; i++) {
            result[i].style.fontSize = "40px";
        }
    }*/
    /*getElementByName      通过name属性查找元素，只会返回一个匹配的元素数组*/
    function change2() {
        var result = document.getElementsByName("jredu");
        JS常用代码片段2-值得收藏


 DOM探索之基础详解——学习笔记


 前端开发中最常用的JS代码片段


 angularJS使用ocLazyLoad实现js延迟加载


 JS之BOM与DOM


 2.ReactJS基础(虚拟DOM,JSX语法)