DOM

1、nodeType返回类型

1、nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

2、nodeValue
对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

3、nodeType
nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 ==》节点类型
元素element ==》1
属性attr ==》2
文本text ==》3
注释comments ==》8
文档document ==》 9

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合
查看的话  循环输出

2、间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点


parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

二、操作

1、内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML   
value       值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="www.baidu.com">老男孩<span>666</span></a>
    <input id="txt" type="text">
    <select id="sel">
        <option value="1">北京</option>
        <option value="2">上海</option>
    </select>
    <script>
        var obj = document.getElementsByTagName("a")[0];
//        alert(obj.innerText);老男孩666
//        alert(obj.innerHTML);老男孩<span>666</span></a>
        var val =document.getElementById("txt").value;
        console.log(val);
//        老男孩<span>666</span></a>
        obj.innerText = '123';
//        obj.innerHTML = '<p>12663</p>'
    </script>
</body>
</html>

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5、样式操作

var obj = document.getElementById('i1')

obj.style.fontSize = "32px";

obj.style.backgroundColor = "red";

 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />

    <script>
        function Focus(ths){
            ths.style.color = "black";
            if(ths.value == '请输入关键字' || ths.value.trim() == ""){

                ths.value = "";
            }
        }

        function Blur(ths){
            if(ths.value.trim() == ""){
                ths.value = '请输入关键字';
                ths.style.color = 'gray';
            }else{
                ths.style.color = "black";
            }
        }
    </script>

dom

6、位置操作

总文档高度
document.documentElement.offsetHeight

当前文档占屏幕高度
document.documentElement.clientHeight

自身高度
tag.offsetHeight

距离上级定位高度
tag.offsetTop

父定位标签
tag.offsetParent

滚动高度
tag.scrollTop

/*

    clientHeight -> 可见区域：height + padding

    clientTop    -> border高度

    offsetHeight -> 可见区域：height + padding + border

    offsetTop    -> 上级定位标签的高度

    scrollHeight -> 全文高：height + padding

    scrollTop    -> 滚动高度

    特别的：

        document.documentElement代指文档根节点

*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="margin: 0;">
    <div style="height: 900px;">

    </div>
    <div style="padding: 10px;">
        <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
        </div>
    </div>

    <script>
        var i1 = document.getElementById('i1');

        console.log(i1.clientHeight); // 可见区域：height + padding
        console.log(i1.clientTop);    // border高度
        console.log('=====');
        console.log(i1.offsetHeight); // 可见区域：height + padding + border
        console.log(i1.offsetTop);    // 上级定位标签的高度
        console.log('=====');
        console.log(i1.scrollHeight);   //全文高：height + padding
        console.log(i1.scrollTop);      // 滚动高度
        console.log('=====');

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

test

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

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
        </div>
        <div class="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

        }
    </script>
</body>
</html>

滚动固定

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

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    h1{
        padding: 0;
        margin: 0;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
        border: 1px solid red;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog" id="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
        </div>
        <div class="content" id="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

            var content = document.getElementById('content');
            var sections = content.children;
            for(var i=0;i<sections.length;i++){
                var current_section = sections[i];

                // 当前标签距离顶部绝对高度
                var scOffTop = current_section.offsetTop + 60;

                // 当前标签距离顶部，相对高度
                var offTop = scOffTop - bodyScrollTop;

                // 当前标签高度
                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){
                    // 当前标签添加active
                    // 其他移除 active
                    var menus = document.getElementById('catalog').children;
                    var current_menu = menus[i];
                    current_menu.classList.add('active');
                    for(var j=0;j<menus.length;j++){
                        if(menus[j] == current_menu){

                        }else{
                            menus[j].classList.remove('active');
                        }
                    }
                    break;
                }

            }


        }
    </script>
</body>
</html>

滚动菜单

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

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    h1{
        padding: 0;
        margin: 0;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
        border: 1px solid red;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog" id="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
        </div>
        <div class="content" id="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section" style="height: 200px;">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

            var content = document.getElementById('content');
            var sections = content.children;
            for(var i=0;i<sections.length;i++){
                var current_section = sections[i];

                // 当前标签距离顶部绝对高度
                var scOffTop = current_section.offsetTop + 60;

                // 当前标签距离顶部，相对高度
                var offTop = scOffTop - bodyScrollTop;

                // 当前标签高度
                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){
                    // 当前标签添加active
                    // 其他移除 active

                    // 如果已经到底部，现实第三个菜单
                    // 文档高度 ＝ 滚动高度 + 视口高度

                    var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
                    var b = bodyScrollTop + document.documentElement.clientHeight;
                    console.log(a+60,b);
                    if(a == b){
                        var menus = document.getElementById('catalog').children;
                        var current_menu = document.getElementById('catalog').lastElementChild;
                        current_menu.classList.add('active');
                        for(var j=0;j<menus.length;j++){
                            if(menus[j] == current_menu){

                            }else{
                                menus[j].classList.remove('active');
                            }
                        }
                    }else{
                        var menus = document.getElementById('catalog').children;
                        var current_menu = menus[i];
                        current_menu.classList.add('active');
                        for(var j=0;j<menus.length;j++){
                            if(menus[j] == current_menu){

                            }else{
                                menus[j].classList.remove('active');
                            }
                        }
                    }




                    break;
                }

            }


        }
    </script>
</body>
</html>

滚动高度

7、提交表单

document.geElementById('form').submit()

8、其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框

// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载

// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

三、事件

对于事件有两个需要注意的要点：

this
event

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>

搜索框

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>

跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="Func(123,'123');">adf</div>
    <div onclick="Func1(this);">111</div>
    <div onclick="Func1(this);">a222df</div>

    <style>
        ul{
            padding: 0;
            margin: 0;
        }
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 500px;
            background-color: #2459a2;
            border: 2px solid #333;
        }
        .menu .title{
            background-color: brown;
            cursor: pointer;
        }
        .menu .content{
            background-color: white;
        }
    </style>

    <div class="menu">
        <div class="item">
            <div class="title" onclick="Show(this);">菜单一</div>
            <div class="content">
                <ul>
                    <li>内容1</li>
                    <li>内容1</li>
                    <li>内容1</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <!--arg.下一个标签nex-->
            <div class="title" onclick="Show(this);">菜单二</div>
            <div class="content hide">
                <ul>
                    <li>内容2</li>
                    <li>内容2</li>
                    <li>内容2</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="Show(this);">菜单三</div>
            <div class="content hide">
                <ul>
                    <li>内容3</li>
                    <li>内容3</li>
                    <li>内容3</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="Show(this);">菜单四</div>
            <div class="content hide">
                <ul>
                    <li>内容4</li>
                    <li>内容4</li>
                    <li>内容4</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        function Func(arg,a2) {
            console.log(arg,a2);
        }
        function Func1(arg) {
            console.log(arg);
        }
        function Show(arg) {
            // arg当前菜单
            // console.log(arg);

            arg.nextElementSibling.classList.remove('hide');
            var father = arg.parentElement;
            var sons = father.parentElement.children;
            console.log(sons);
            for(var i=0;i<sons.length;i++){
                var current_ele = sons[i];
                if(current_ele == father){

                }else{
                    current_ele.children[1].classList.add('hide');
                }
            }
        }
    </script>
</body>
</html>

菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
            z-index: 2;
        }
        .c2{
            background-color: white;
            position: fixed;
            width: 400px;
            height: 300px;
            top: 50%;
            left: 50%;
            z-index: 3;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td><input type="button" value="点我" onclick="Show('123');" /></td>
            </tr>
        </table>
    </div>

    <div id="shade" class="c1 hide"></div>
    <div id="modal" class="c2 hide">
        <p>用户：<input type="text" /> </p>
        <p>密码：<input type="password" /> </p>
        <p>
            <input type="button" value="确定" >
            <input type="button" value="取消"  onclick="Hide();">
        </p>
    </div>

    <script>
        function Show(arg) {
            console.log(arg);
            document.getElementById('shade').classList.remove('hide');
            document.getElementById('modal').classList.remove('hide');
        }
        function Hide() {
            document.getElementById('shade').classList.add('hide');
            document.getElementById('modal').classList.add('hide');
        }
    </script>
</body>
</html>

点我居中弹出

例子1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gg{
            color: gray;
        }
        .bb{
            color: black;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入内容" />
    <p>当鼠标进入时，移除内容</p>
    <p>当鼠标退出时，添加内容</p>
    <input type="text" class="gg" value="请输入内容" onfocus="Focus(this);" onblur="Blur(this);" />

    <script>
        function  Focus(ths) {
            // 查找第一种方式
            // document.....
            // 第二种方式 this
            // ths
            ths.className = "bb";
            var current_val = ths.value;
            if (current_val == "请输入内容"){
                ths.value = "";
            }
        }
        function Blur(ths) {
            var current_val = ths.value;
            if(current_val=='请输入内容' || current_val.trim().length == 0){
                ths.value = '请输入内容';
                ths.className = 'gg';
            }

        }
    </script>

</body>
</html>

选框移除内容

例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<input id="i1"  type="text" value="123"/>-->
    <!--<input  id="i2" type="password" value="111" />-->
    <!--<textarea id="i3">666</textarea>-->
    <h1>爱好</h1>
    <div id="i1">
        <ul>
            <li> <input type="checkbox" value="1" /> 篮球 </li>
            <li> <input type="checkbox" value="2"/> 足球 </li>
            <li> <input type="checkbox" value="3"/> 去球 </li>
        </ul>
    </div>
    <div id="i2">
        <ul>
            <li> <input type="checkbox" value="11" /> 篮球 </li>
            <li> <input type="checkbox" value="22"/> 足球 </li>
            <li> <input type="checkbox" value="33"/> 去球 </li>
        </ul>
    </div>
    <select id="ii">
        <option value="11">上海</option>
        <option value="22">北京</option>
    </select>
    <script>


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

选择

例子3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" ondblclick="CheckAll();"/>
        <input type="button" value="取消" ondblclick="CancleAll();"/>
        <input type="button" value="反选" ondblclick="ReverseAll();"/>
    </div>

    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id ="tb">
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>alex</td>
                <td>alex</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>alex</td>
                <td>alex</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>alex</td>
                <td>alex</td>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {
            var tb = document.getElementById("tb");
            console.log(tb);
            var checks = tb.getElementsByClassName("c1");
            console.log(checks);
            for (var i=0;i<checks.length;i++){
                var current_check = checks[i];
                current_check.checked = true;
            }
        }
        function CancleAll() {
            var tb = document.getElementById("tb");
            var checks = tb.getElementsByClassName("c1");
            for (var i = 0; i < checks.length; i++) {
                var current_check = checks[i];
                current_check.checked = false
            }
        }
        function ReverseAll() {
            var tb = document.getElementById("tb");
            var checks = tb.getElementsByClassName("c1");
            for (var i = 0; i < checks.length; i++) {
                var current_check = checks[i];
                if (current_check.checked){
                    current_check.checked = false;
                }else {
                    current_check.checked = true
                }
            }
        }
    </script>



</body>
</html>

选择框

例子4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li><input type="radio" name="g"  value="11"/>男</li>
        <li><input type="radio" name="g" value="22"/>女</li>
        <li><input type="radio" name="g" value="33"/>中</li>
    </ul>
    <script>
        var radios = document.getElementsByTagName('input');
        // radios[1].value

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

单选

例子5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="sel">
        <option value="11">上海</option>
        <option value="22" selected="selected">北京</option>
        <option value="33">河南</option>
        <option value="444">山东</option>
    </select>
</body>
</html>

通过改变值来改变选项

例子6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="Func();" value="点我">
    <div id="i1">
        <div class="c1">12 </div>
         <div class="c1" alex = "sb">12 </div>
         <div class="c1">12 </div>
         <div class="c1" alex = "sb">12 </div>
         <div class="c1">12 </div>
         <div class="c1" alex = "sb">12 </div>
         <div class="c1">12 </div>
         <div class="c1">12 </div>
    </div>
    <script>
        function Func() {
            var i1 =document.getElementById("i1");
            var divs = i1.children;
            for (var i=0;i<divs.length;i++){
                var current_div = divs[i];
                var result = current_div.getAttribute("alex");
                if(result == "sb"){
                    current_div.innerText = "456";
                }
            }
        }
    </script>
</body>
</html>

通过查找属性和值来判断是否修改

例子7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul li{
            float: left;
            background-color: #2459a2;
            color: white;
            padding: 8px 10px;
        }
        .clearfix:after{
            display: block;
            content: '.';
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .hide{
            display: none;
        }
        .tab-menu .title{
            background-color: #dddddd;
        }
        .tab-menu .title .active{
            background-color: white;
            color: black;
        }
        .tab-menu .content{
            border: 1px solid #dddddd;
            min-height: 150px;
        }
    </style>
</head>
<body>
    <div style="width: 400px;margin: 0 auto">

        <div class="tab-menu">
            <div class="title clearfix">
                <ul>
                    <li target="h1" class="active" onclick="Show(this);">价格趋势</li>
                    <li target="h3" onclick="Show(this);">市场分布</li>
                    <li target="h2" onclick="Show(this);">其他</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div con="h1">content1</div>
                <div con="h2" class="hide">content2</div>
                <div con="h3" class="hide">content3</div>
            </div>

        </div>
    </div>
    <script>
        function Show(ths) {
            // ths表示当前标签
            var target = ths.getAttribute('target'); //h3
            // 给自己添加样式active
            // 兄弟们去掉
            ths.className = 'active';
            var brothers = ths.parentElement.children;
            for(var i=0;i<brothers.length;i++){
                if(ths == brothers[i]){

                }else{
                    brothers[i].removeAttribute('class');
                }
            }
            // 操作内容
            var contents = document.getElementById('content').children;
            for(var j=0;j<contents.length;j++){
                var current_content = contents[j];
                var con = current_content.getAttribute('con');
                if(con == target){
                    current_content.classList.remove('hide');
                }else{
                    current_content.className = "hide";
                }
            }

        }
    </script>
</body>
</html>

趋势图

例子8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0;">
    <div style="height: 20px;"></div>
    <div style="padding: 8px;margin: 20px;position: relative;">
            <div id="i1" style="height:200px;border: 40px solid green;padding: 10px; margin: 90px;">asdf</div>
    </div>
    <script>
        var t1 = document.getElementById('i1');
        console.log(t1.clientTop); // 边框高度
        console.log(t1.clientHeight); // height + padding上 + padding下

        console.log(t1.offsetTop);     //可见内容距离顶部高度；单纯距离顶端高度，从边框外部开始计算
        console.log(t1.offsetHeight); //可见内容高度；自身高度  height + padding上 + padding下 + border上 + border下

        console.log(t1.scrollTop);
        console.log(t1.scrollHeight); // 内容高度，height + padding上 + padding下
    </script>
</body>

高du

例子10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div>
            <input type="text" />
            <input type="button" value="添加" onclick="AddElement(this);" />
        </div>
        <div style="position: relative;">
            <ul id="commentList">
                <li>alex</li>
                <li>eric</li>
            </ul>
        </div>
    </div>
    <script>
        function AddElement(ths) {
            // 获取输入的值
            var val = ths.previousElementSibling.value;
            ths.previousElementSibling.value = "";
            var commentList = document.getElementById('commentList');
            //第一种形式，字符串方式
            //var str = "<li>" + val + "</li>";
            // 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            // beforeEnd内部最后
            // beforeBegin 外部上边
            //afterBegin  内部贴身
            //afterEnd    外部贴墙
            //commentList.insertAdjacentHTML("beforeEnd",str);
            //第二种方式，元素的方式
            var tag = document.createElement('li');
            tag.innerText = val;
            var temp = document.createElement('a');
            temp.innerText = '百度';
            temp.href = "http://etiantian.org";
            tag.appendChild(temp);
            // commentList.appendChild(tag);
            commentList.insertBefore(tag,commentList.children[1]);
        }
    </script>
</body>
</html>

添加一行

例子11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <h2 id="h1">333
            <span>123</span>
            <a>123</a>
        </h2>
        <div id="container">
            <div class="item">1</div>
            <div class="item">2</div>

        </div>

        <script>
            var h = document.getElementById('h1');
            var c = document.getElementById('container');
            //c.appendChild(h);
            var newH = h.cloneNode(true);
            c.appendChild(newH);
        </script>
</body>
</html>

克隆

例子12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .go-top{
            position: fixed;
            right: 28px;
            bottom: 19px;
            width: 40px;
            height: 40px;
            background-color: #2459a2;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="Func();">

    <div id="xo" style="height: 200px;overflow: auto" onscroll="Func();">
        <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
        <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
        <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
        <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>
        <div>sdf</div>

    </div>

    <div id="i1" style="height: 2000px">
        <H1>asdf</H1>

    </div>
    <div id="i2" class="go-top hide">
        <a href="javascript:void(0);" onclick="GoTop();">返回顶部</a>
    </div>
    <script>
        function Func() {
            var scrollTop = document.body.scrollTop;
            var ii = document.getElementById('i2');
            if(scrollTop>100){
                ii.classList.remove('hide');
            }else{
                ii.classList.add('hide');
            }
        }
        function GoTop() {
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

返回顶部

例子13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div style="height: 20px;background-color: green;"></div>
        <div style="border: 5px solid pink;padding: 10px;">
            <div>
                <div id="xo" style="height: 200px;overflow: auto;width: 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" >
                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>
                    <div>sdf</div>

                </div>
            </div>
        </div>
    <script>
        var height =document.documentElement.offsetHeight;
        console.log(height)
    </script>
</body>
</html>

内部边框高度

例子14 15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: #dddddd;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header{
            background-color: black;
            color: white;
            height: 48px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 180px;
            background-color: white;
            float: left;
        }
        .pg-body .menu .active{
            background-color: #425a66;
            color: white;

        }
        .pg-body .fixed{
            position: fixed;
            top: 10px;
        }
        .pg-body .content{
            position: absolute;
            left: 385px;
            right: 200px;
            background-color: white;
            float: left;
        }
        .pg-body .content .item{
            height: 900px;
        }
    </style>
</head>
<body onscroll="Hua();">
    <div class="pg-header">
        <div class="w">

        </div>
    </div>
    <div class="pg-body">
        <div id="menu" class="menu">
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
            </ul>
        </div>
        <div id="content" class="content">
            <div class="item">床前明月管</div>
            <div class="item">疑是地上霜</div>
            <div class="item" style="height: 100px;">我是郭德纲</div>
        </div>

    </div>

    <script>
        function Hua() {
            var huaGao = document.body.scrollTop;
            var caiDan = document.getElementById('menu');
            if(huaGao>48){
                caiDan.classList.add('fixed');
            }else{
                caiDan.classList.remove('fixed');
            }

            var items = document.getElementById('content').children;
            for(var i=0;i<items.length;i++){
                var currentItem = items[i];
                var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
                var currentItemWindowTop = currentItemBodyTop - huaGao;
                console.log(currentItemWindowTop);
                var currentHeight = currentItem.offsetHeight;
                console.log(currentHeight);
                var bottomHeight = currentItemBodyTop+currentHeight;


                if(currentItemWindowTop<0 && huaGao < bottomHeight){
                    var ziJi = caiDan.getElementsByTagName('li')[i];
                    ziJi.className = 'active';
                    var lis = caiDan.getElementsByTagName('li');
                    for(var j = 0;j<lis.length;j++){
                        if (ziJi == lis[j]){

                        }else {
                            lis[j].classList.remove('active');
                        }
                    }
                    break;

                }


            }



        }
    </script>
</body>
</html>

终极大boss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: #dddddd;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header{
            background-color: black;
            color: white;
            height: 48px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 180px;
            background-color: white;
            float: left;
        }
        .pg-body .menu .active{
            background-color: #425a66;
            color: white;

        }
        .pg-body .fixed{
            position: fixed;
            top: 10px;
        }
        .pg-body .content{
            position: absolute;
            left: 385px;
            right: 200px;
            background-color: white;
            float: left;
        }
        .pg-body .content .item{
            height: 900px;
        }
    </style>
</head>
<body onscroll="Hua();">
    <div class="pg-header">
        <div class="w">

        </div>
    </div>
    <div class="pg-body">
        <div id="menu" class="menu">
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
            </ul>
        </div>
        <div id="content" class="content">
            <div class="item">床前明月管</div>
            <div class="item">疑是地上霜</div>
            <div class="item" style="height: 100px;">我是郭德纲</div>
        </div>

    </div>

    <script>
        function Hua() {
            var a = document.body.offsetHeight;
            var b = document.getElementById("content").offsetHeight;
            var c = document.documentElement.clientHeight;



            var huaGao = document.body.scrollTop;
            var caiDan = document.getElementById('menu');
            if(huaGao>48){
                caiDan.classList.add('fixed');
            }else{
                caiDan.classList.remove('fixed');
            }



            var items = document.getElementById('content').children;
            for(var i=0;i<items.length;i++){
                var currentItem = items[i];
                var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
                var currentItemWindowTop = currentItemBodyTop - huaGao;
                console.log(currentItemWindowTop);
                var currentHeight = currentItem.offsetHeight;
                console.log(currentHeight);
                var bottomHeight = currentItemBodyTop+currentHeight;

                console.log((a+b) == (huaGao +c));
                if ((a+b) == (huaGao +c)){
                    var mu = document.getElementById("menu").children[0].lastElementChild;
                    var lis = document.getElementById("menu").getElementsByTagName("li");
                    for( var m=0;m<lis.length;m++){
                        var current_list =lis[m];
                        if(current_list.getAttribute("class")=="active"){
                            current_list.classList.remove("active");
                            break;
                        }
                    }
                    mu.classList.add("active");
                    return
                }

                if(currentItemWindowTop<0 && huaGao < bottomHeight){
                    var ziJi = caiDan.getElementsByTagName('li')[i];
                    ziJi.className = 'active';
                    var lis = caiDan.getElementsByTagName('li');
                    for(var j = 0;j<lis.length;j++){
                        if (ziJi == lis[j]){

                        }else {
                            lis[j].classList.remove('active');
                        }
                    }
                    break;

                }


            }



        }
    </script>

zhongjiban

例子16

.submit() 提交表单

confirm("傻狗") 弹框并不返回一个选择状态的值

setInterval 定时执行

clearInterval(s1); 取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="fom" action="https://www.sogou.com/web?" method="get">
        <input name="query" type="text" />
        <input type="button" onclick="SubmitForm();" value="提交"/>
    </form>
    <hr />

    <input type="button" value="confirm" onclick="Firm();" />

    <input type="button" value="Interval" onclick="Interval();" />
    <input type="button" value="StopInterval" onclick="StopInterval();" />

    <div>
        <input type="button" value="删除" onclick="Delete();" />
        <input type="button" value="保留状态" onclick="UnDelete();" />
        <div id="status"></div>
    </div>

    <script>
        function UnDelete() {
            clearTimeout(t1);
        }
        function Delete() {
            document.getElementById('status').innerText = "已删除";
            t1 = setTimeout(ClearStatus, 5000);
        }
        function ClearStatus() {
            document.getElementById('status').innerText = "";
        }
        
        function SubmitForm() {
            document.getElementById('fom').submit();
        }
        function Firm() {
            var r = confirm('傻狗');
            console.log(r)
        }
        function f1() {
            console.log(1234);
        }
        function Interval() {
            //setInterval("console.log(1)", 1000);
            //setInterval(f1, 1000);
            s1 = setInterval(function() {
                console.log(123);
            }, 1000);
            s2 = setInterval(function() {
                console.log(13);
            }, 2000);
            console.log(1)
        }
        function StopInterval() {
            clearInterval(s1);
        }
    </script>
</body>

定时执行和控制

例子16

作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btns" >
        <input type="button" value="点我1" />
        <input type="button" value="点我2"  />
        <input type="button" value="点我3"  />
    </div>

    <script>
//        function func() {
//            //var xxoo;
//            alert(xxoo);
//            var xxoo = 123;
//        }
//
//        func();
//        var xxoo;
//        alert(xxoo);


//        var btns = document.getElementById('btns').children;
//        for(var j =0;j <btns.length;j++){
//            var current_input = btns[j];
//            current_input.onclick = function(){
//                alert(j);
//            }
//        }
//         j = 3


//        function test(){
//            if(1==1){
//                var xo = 123;
//            }else{
//                var ox = 456;
//            }
//            console.log(xo,ox);
//        }
//        test();
        // JavaScript:函数
        // 定义时已经创建作用域链，之后按照作用域链来执行
        //
//        (function(a){
//            // 其实有a变量
//            var a;
//            var a = 123;
//            console.log(a);
//        })(123);

        function func() {
            for(var i=0;i<3;i++){
                var ret = (function (arg){
                    console.log(arg);
                    // undefind
                })(i);
                console.log(i);
                setInterval(ret, 1000);
            }
            // i = 3
        }
        func();


//        oop = 111;
//        function f1(){
//            alert(oop);
//        }
//        oop = 333;
//        f1();




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

作用域

例子17

python 中的作用域

#!/usr/bin/env python
# -*- coding:utf-8 -*-

# if 1 == 1:
#     xo = 123
# print(xo)
# def f1():
#     xo = 123
# f1()
# print(xo)
"""
xo = 'alex'

def f1():
    print(xo)

def f2():
    xo = "xxoo"
    f1()
f2()
"""
"""
li = []

for i in range(10):
    # def f1():
    #     return i
    # f1 = lambda: i
    li.append(lambda: i)
# print(i)
print(li)
print(li[0]())
print(li[1]())


"""
# li = [x+10 for x in range(9) if x > 5]
# print(li)
li = [lambda:x for x in range(9)]
print(li)
print(li[0])
print(li[0]())

python 作用域

例子18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onmouseover="Func(this);" onmouseout="Out(this);">123</div>
    <input type="text" onkeydown="Down(this,event);" />
    <script>
        
        function Down(ths,e) {
            console.log(e.keyCode);
        }
        
        function Func(ths) {
            ths.style.color = 'red';
        }
        function Out(ths) {
            ths.style.color = 'black';
        }
    </script>
</body>
</html>

鼠标移动

例子19

return Func() 控制着接下来的函数是否执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://etiantian.org" onclick="return Func();">揍你</a>
    <form action="s2.html">
        <div id="form1">
            <input type="text" />
        </div>
        <input type="submit"  value="提交" onclick="return SubmitForm();" />
    </form>
    <script>
        function Func() {
            alert(123);
            return true;
        }
        function SubmitForm() {
            var inputs = document.getElementById('form1').getElementsByTagName('input');
            for(var i =0;i<inputs.length;i++){
                var currentInput = inputs[i];
                var val = currentInput.value;
                if(val.trim().length == 0){
                    alert('请输入内容');
                    return false;
                }
            }
            return true

        }
    </script>
</body>
</html>

控制函数

posted @ 2016-07-07 16:56 若时光搁浅阅读(135) 评论(0) 收藏举报

刷新页面返回顶部

若时光搁浅

DOM