zoukankan html css js c++ java

前端：DOM

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

一、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

注：以后设置id，不能以数字开头并且与其他id不能重复，不然会找错

示例：

<div>
    <div class="c1">cla1</div>
    <div class="c1" id="i1">
        <div name="n1">n1</div>
        <div name="n1">
            <a>a1</a>
            <a>a2</a>
        </div>
    </div>
    <div class="c1">cla3</div>
</div>

这里直接在终端浏览器上进行演示，演示效果图：

我们找到的分为两类，一类是元素，一类是元素集合。其他的直接查找也是通过这种方法来找，这里就不一一演示了。

2、间接查找

包含文本和标签：
parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
只包含标签：
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

示例1：

<div>
    123
    <div class="c1">cla1</div>
    <div class="c1" id="i1">
        <p>pppppp</p>
        <div name="n1">
            <span>span</span>
        </div>
        <div name="n1">
            <a>a1</a>
            <a>a2</a>
        </div>
    </div>
    <div class="c1">cla3</div>
</div>

效果演示图:

效果演示图2:

如果nodeType=3，就是文本，如果nodeType=1，就是标签。

示例2：

<div>
    <div class="c1">cla1</div>
    <div class="c1" id="i1">
        <p>pppppp</p>
        <div name="n1">
            <span>span</span>
        </div>
        <div name="n1">
            <a>a1</a>
            <a>a2</a>
        </div>
    </div>
    <div class="c1">cla3</div>
</div>

效果演示图：

实例：只获取标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        123
        <div class="c1">asdf</div>
        <div class="c1" id="i1">
            <p>p</p>
            <div name="n1">
                <span>n1</span>
            </div>
            <div name="n2">
                <a>a1</a>
                <a>a11111</a>
            </div>
        </div>
        <div class="c1">casdf</div>
    </div>
    <script>
        var i1 = document.getElementById("i1");//id为i1的标签
        var p1_text = i1.parentNode;//含文本，也有标签
        var p1 = i1.parentElement;//不含文本，只有标签

        var eles_node = p1_text.childNodes //含文本和所有标签
        for(var j=0;j<eles_node.length;j++){
            var current_node = eles_node[j];
            if(current_node.nodeType == 1){//nodeType==1是标签，nodeType>1是文本
                console.log(eles_node[j])
            }
        }
        var eles = p1.children;//不含文本所有标签
        for(var i=0;i<eles.length;i++){
            console.log(eles[i])
        }
    </script>
</body>
</html>

结果：

二、操作

1、内容

1 innerText   文本
2 outerText
3 innerHTML   HTML内容
4 outerHTML  
5 value       值

示例：

<body>
    <a href="http://www.baidu.com">hello<span>world</span></a>
    <script>
        var obj = document.getElementsByTagName("a")[0];
        alert(obj.innerText);
        alert(obj.innerHTML);
    </script>
</body>

Text效果演示图：

Html效果演示图：

如果要赋值：

<body>
    <a href="http://www.baidu.com">百度<span>ok</span></a>
    <input id="txt" type="text"/>
    <select id="sel">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>
    <script>
        var obj =document.getElementsByTagName("a")[0];
        obj.innerText = "123"//赋值
        obj.innerHTML = "<p>333</p>"//赋值
    </script>

</body>

value：可以获取值，也可以设置值。

<input id="txt" type="text">
<select id="sel">
    <option value="1">上海</option>
    <option value="2">北京</option>
</select>

效果演示图：

1、文本为空时取值：

2、文本有值时取值：

3、赋值：

获取例子中表单里面的值：

1、

2、

value可操作的标签：input:text、checkbox、radio、password、select、textarea

其他实例：

复选框操作：checked=true：选中；checked=false：未选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <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>
</body>
</html>

效果演示图：

实例：全选、取消、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选、取消、反选</title>
</head>
<body>
    <h1>今天你想吃什么</h1>
    <div>
        <input type="button" value="全选" onclick="CheckAll();"/>
        <input type="button" value="取消" onclick="CancleAll();"/>
        <input type="button" value="反选" onclick="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>火锅</td>
                <th>188</th>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox"/></td>
                <td>冒菜</td>
                <th>68</th>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox"/></td>
                <td>烧烤</td>
                <th>88</th>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {//全选
            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 = 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){//如果选中，就是true
                    current_check.checked = false;//将选中的变为false
                }else{//如果没有选中，就是false
                    current_check.checked = true;//将没有选中的变为true
                }
            }
        }
    </script>
</body>
</html>

全选、取消、反选

实例：单选框

注：radio要有相同的name才能互斥。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
    <div>
        <ul class="radios">
            <li><input type="radio" name="gender" value="11">man</li>
            <li><input type="radio" name="gender" value="22">woman</li>
        </ul>
    </div>
    <script>
        var radios = document.getElementsByTagName("input")
    </script>
</body>
</html>

效果演示图：

实例：下拉框

<select id="sel">
    <option value="11">北京</option>
    <option value="22" selected="selected">上海</option>
    <!--selected="selected"：默认选中上海-->
    <option value="33">广州</option>
</select>

效果演示图：

1：

2：

selectedIndex:

2、属性

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

实例：摸态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .hide{
            display: none;
        }
        .model{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.5);
            z-index: 2;
        }
        .content{
            height: 300px;
            width: 400px;
            background-color: pink;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div style="background-color: palevioletred;height: 1024px">
        <table>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
               <td><input type="button" value="点我" onclick="Show();"></td>
           </tr>
       </table>
        <table>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
               <td><input type="button" value="点我" onclick="Show();"></td>
           </tr>
       </table>
        <table>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
               <td><input type="button" value="点我" onclick="Show();"></td>
           </tr>
       </table>
   </div>
    <div id="2" class="model hide"></div>
    <div id="3" class="content hide">
        <p>用户：<input type="text"></p>
        <p>密码：<input type="password"></p>
        <p>
            <input type="button" value="确定" onclick="Hide()">
            <input type="button" value="取消" onclick="Hide()">
        </p>
    </div>

    <script>
        function Show() {
            document.getElementById("2").classList.remove("hide");
            document.getElementById("3").classList.remove("hide");
        }
        function Hide() {
            document.getElementById("2").classList.add("hide");
            document.getElementById("3").classList.add("hide");
        }
    </script>
</body>
</html>

摸态对话框

给onclick传特殊参数：this。只要鼠标点击this就代指点击的是当前标签

实例：折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</head>
<body>
    <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">
            <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 Show(arg) {
        arg.nextElementSibling.classList.remove("hide");//删除当前点击的div中的hide
        var father = arg.parentElement;//找到当前点击的div的父级
        var sons = father.parentElement.children;//找到所有的item
        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");//找到"content hide"的div
            }
        }
    }
</script>
</body>
</html>

折叠菜单

实例：搜索框

方法一：
<input type="text" placeholder="请输入内容">

方法二:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>万能搜索框</title>
    <style>
        .gg{
            color: gray;
        }
        .bb{
            color: black;
        }
    </style>
</head>
<body>
    <input type="text" class="gg" value="请输入内容" onfocus="Touch(this);" onblur="Move(this);"/>
    <script>
        function Touch(ths) {
            ths.className = "bb";
            var current_val = ths.value;//通过点击标签获得value值
            if (current_val == "请输入内容"){//判断点击后如果文本框里面值是：请输入内容
                ths.value = "";//赋值一个空值给value
            }
        }
        function Move(ths) {
            var current_val = ths.value;//鼠标离开文本框时文本框里面的值
            if (current_val =="请输入内容" || current_val.trim().length == 0){//判断鼠标离开后文本框内容如果是用户自己输入：请输入内容，或者是空格，或者是空
                ths.value = "请输入内容";//就重新赋值
                ths.className = "gg";//复制后将字体颜色变成灰色
            }
        }
    </script>
</body>
</html>

onfocus:当鼠标获取焦点时，通俗来将就是鼠标点入搜索框时，鼠标在闪动并且边框也改变了颜色。

onblur:当鼠标离开搜索框时可以执行某个函数

实例：自定义属性操作

将自定义属性进行操作后，改变原来的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>
<body>
    <input type="button" onclick="Func();" value="点点点"/>
    <div id="i1">
        <div class="c1">111</div>
        <div class="c1" abc="222">111</div>
        <div class="c1">111</div>
        <div class="c1" abc="222">111</div>
        <div class="c1">111</div>
        <div class="c1" abc="222">111</div>
    </div>

    <script>
        function Func() {
            var i1 = document.getElementById("i1");//找到id
            var divs = i1.children;//找到所有的孩子
            for(var i=0;i<divs.length;i++){//循环所有的孩子
                var current_div = divs[i];//获取索引
                var result = current_div.getAttribute("abc");//找到索引对应的标签的属性
                if(result == "222"){//如果属性的值等于222
                    current_div.innerText = "222";//将此标签的内容重新赋值
                }
            }
        }
    </script>
</body>
</html>

效果演示图：

1：

2：

3、class操作

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

1 以字符串形式呈现：obj.getElementById("...").className
2 以列表形式呈现：obj.getElementById("...").classList
3 删除属性：obj.getElementById("...").classList.remove("....")
4 添加属性：obj.getElementById("...").classList.add("....")

示例：

<select id="sel">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

效果演示图：

实例：Tab菜单

<!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: paleturquoise;
            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=" 600px;margin: 0 auto">
        <div class="tab-menu">
            <div class="title clearfix">
                <ul>
                    <li target="11" class="active" onclick="Show(this);">火锅配料</li>
                    <li target="33" onclick="Show(this);">冒菜配料</li>
                    <li target="22" onclick="Show(this);">烧烤配料</li>
                </ul>
            </div>
            <div id="cc" class="content">
                <div con="11">牛油、醪糟...</div>
                <div con="22" class="hide">孜然、花椒粉...</div>
                <div con="33" class="hide">豆瓣、大蒜...</div>
            </div>
        </div>
    </div>

    <script>
        function Show(ths) {
            var tsrget = ths.getAttribute("target");
            ths.className = "active";//给点击到的标签赋值class
            var brothers = ths.parentElement.children;//获取兄弟标签
            for(var i=0;i<brothers.length;i++){
                if(ths == brothers[i]){//如果循环到自己，就不做操作

                }else{//如果循环到其他，就移除class属性
                    brothers[i].removeAttribute("class");
                }
            }
            //操作内容
            var contents = document.getElementById("cc").children;//获取内容div的子级
            for(var j=0;j<contents.length;j++){//循环子级
                var current_content = contents[j];//得到循环到的某一子级
                var con = current_content.getAttribute("con");//获取con属性的值
                if(con == tsrget){//如果con值和点击到标签的属性值一样
                    current_content.classList.remove("hide");//去除hide属性
                }else{//如果不一样
                    current_content.className = "hide";//添加hide属性
                }
            }
        }
    </script>
</body>
</html>

Tab菜单

效果演示图：

1：

2：

4、标签操作

a、创建标签

1 // 方式一
2 var tag = document.createElement('a')
3 tag.innerText = "wupeiqi"
4 tag.className = "c1"
5 tag.href = "http://www.cnblogs.com/wupeiqi"
6  
7 // 方式二
8 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b、操作标签

 1 // 方式一
 2 var obj = "<input type='text' />";
 3 xxx.insertAdjacentHTML("beforeEnd",obj);
 4 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 5  
 6 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 7  
 8 // 方式二
 9 var tag = document.createElement('a')
10 xxx.appendChild(tag)
11 xxx.insertBefore(tag,xxx[1])

beforeBegin:在<ul>上部添加

beforeEnd:在<li>的末尾添加

afterEnd:在<ul>的外部末尾添加

afterBegin:在<li>内部开头添加

实例：创建标签并插入标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加列表</title>
</head>
<body>
    <div>
        <h1>添加您知道的美食</h1>
        <input type="text"/>
        <input type="button" value="添加" onclick="Addcon(this);"/>
    </div>
    <div>
        <ul id="content">
            <li>大宅门火锅</li>
            <li>老妈兔头</li>
        </ul>
    </div>
    <script>
        function Addcon(ths) {
            var val = ths.previousElementSibling.value;//获取输入的值
            ths.previousElementSibling.value = "";//获取值后，将内容复制为空
            var contentList = document.getElementById("content");//获取列表
//            //第一种添加形式:字符串方式
//            var str = "<li>" + val + "</li>";//将获取到的值和标签进行组合
//            contentList.insertAdjacentHTML("beforeEnd",str);//将组合好的字符串添加到列表中

//            //第二种添加形式：元素方式（推荐）
            var tag = document.createElement("li");//创建一个要添加的标签
            tag.innerText = val;//将输入的值赋值
            contentList.appendChild(tag);//添加到列表中
            contentList.insertBefore(tag,contentList.children[1]);//添加到制定索引位置

//            //扩展：添加子标签
//            var tag = document.createElement("li");//创建一个要添加的标签
//            tag.innerText = val;//将输入的值赋值
//            var temp = document.createElement("a");
//            temp.innerText = "百度";
//            temp.href = "http://baidu.com";
//            tag.appendChild(temp);
//            contentList.insertBefore(tag,contentList.children[1]);//添加到制定索引位置
        }
    </script>
</body>
</html>

创建标签并插入标签

实例：标签操作之移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加列表实例</title>
</head>
<body>
    <h2 id="h2">222
        <a>a</a>
        <span>s</span>
    </h2>
    <div id="content">
        <div class="item">1</div>
        <div class="item">1</div>
    </div>
    <script>
        var h = document.getElementById("h2");//获取id=h2标签
        var c = document.getElementById("content");//获取id=content标签
        c.appendChild(h);//直接将h2标签和内容全部移到id=content标签里面
    </script>
</body>
</html>

效果演示图：

实例：标签操作之克隆（拷贝、复制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加列表实例</title>
</head>
<body>
    <h2 id="h2">222
        <a>a</a>
        <span>s</span>
    </h2>
    <div id="content">
        <div class="item">1</div>
        <div class="item">1</div>
    </div>
    <script>
        var h = document.getElementById("h2");//获取id=h2标签
        var c = document.getElementById("content");//获取id=content标签
        //克隆：.cloneNode(true)
        var newH = h.cloneNode(true);//cloneNode(true)加true表示h2标签里所有的内容都克隆，不加就表示只拷贝h2标签而里面文本和其他标签都没有拷贝
        c.appendChild(newH);
    </script>
</body>
</html>

效果演示图：

实例：返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部实例</title>
    <style>
        .go-top{
            background-color: palevioletred;
            position: fixed;
            width: 40px;
            height: 40px;
            right: 20px;
            bottom: 10px;
        }
        .hide{
            display: none;
        }
        a{
            text-decoration: none;
            color: palegoldenrod;
        }
    </style>
</head>
<body onscroll="Func();"><!--onscroll：只要滑动滚动条就会执行这个函数-->
    <div id="i1" style="height: 2000px">
        <h1>顶部</h1>
    </div>
    <div id="i2" class="go-top hide">
        <a href="javascript:void (0);" onclick="GoTop();">返回顶部</a>
        <!--href="javascript:void (0)"返回顶部时上不刷新(直接写Href是刷新)。也可以这样写：href="#"-->
    </div>
    <script>
        function Func() {
            var scrolltop = document.body.scrollTop;//获取滚动条距离顶部的距离
            var ii = document.getElementById("i2");
            if(scrolltop>10){  //判断滚动条距离顶部的距离大于10的时候
                ii.classList.remove("hide");  //就将隐藏属性去掉
            }else{
                ii.classList.add("hide");  //判断滚动条距离顶部的距离小于10的时候，就将隐藏属性加上
            }
        }
        function GoTop() {
            document.body.scrollTop = 0;//滚动条赋值为0，就返回到顶部
        }
    </script>
</body>
</html>

返回顶部

5、样式操作

注意backgroundColor的写法

1 var obj = document.getElementById('i1')
2  
3 obj.style.fontSize = "32px";
4 obj.style.backgroundColor = "red";

6、位置操作

 1 总文档高度
 2 document.documentElement.offsetHeight
 3   
 4 当前文档占屏幕高度
 5 document.documentElement.clientHeight
 6   
 7 自身高度
 8 tag.offsetHeight
 9   
10 距离上级定位高度
11 tag.offsetTop
12   
13 父定位标签
14 tag.offsetParent
15   
16 滚动高度
17 tag.scrollTop
18  
19 /*
20     clientHeight -> 可见区域：height + padding
21     clientTop    -> border高度
22     offsetHeight -> 可见区域：height + padding + border
23     offsetTop    -> 上级定位标签的高度
24     scrollHeight -> 全文高：height + padding
25     scrollTop    -> 滚动高度
26     特别的：
27         document.documentElement代指文档根节点
28 */

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollheight</title>
</head>
<body style="margin: 0">
    <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; 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>
        </div>
    </div>
    <script>
        var i =document.getElementById("xo");
        console.log(i.scrollTop); //红色框内滚动条离滚动条顶部的位置：...
        console.log(i.scrollHeight); //红色框内整个文档内部的总高度+padding(上和下)
        console.log(i.clientTop); //红色边框高度:15
        console.log(i.clientHeight); //可见文档范围的高度：可见文本范围自身+padding(上和下)
        console.log(i.offsetTop); //当前标签距离顶部的高度:height: 20px+border: 5px+padding: 10px
        console.log(i.offsetHeight); //可见文档范围的高度：可见文本范围自身+padding(上和下)+border(上和下)
    </script>
</body>
</html>

offsetTop：距离顶部的高度，这个距离顶部的前提是当前标签的父标签没有出现position，如果当前标签父级出现position，就是当前标签距离父级标签的距离

实例：定位菜单

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>定位菜单实例</title>
  6     <style>
  7         body{
  8             margin: 0;
  9             background-color: #dddddd;
 10         }
 11         .pg-header{
 12             background-color: black;
 13             color: white;
 14             height: 48px;
 15         }
 16         .pg-body .menu{
 17             position: absolute;
 18             left: 200px;
 19             width: 180px;
 20             background-color: white;
 21             float: left;
 22         }
 23         .pg-body .menu .active{
 24             background-color: darkslateblue;
 25             color: white;
 26         }
 27         .pg-body .fixed{
 28             position: fixed;
 29             top: 5px;
 30         }
 31         .pg-body .content{
 32             position: absolute;
 33             left: 385px;
 34             right: 200px;
 35             background-color: white;
 36             float: left;
 37         }
 38         .pg-body .content .item{
 39             height: 900px;
 40         }
 41     </style>
 42 
 43 </head>
 44 <body onscroll="Hua();">
 45     <div class="pg-header"></div>
 46     <div class="pg-body">
 47         <div id="menu" class="menu">
 48             <ul>
 49                 <li>第一章</li>
 50                 <li>第二章</li>
 51                 <li>第三章</li>
 52             </ul>
 53         </div>
 54         <div id="content" class="content">
 55             <div class="item">床前明月光</div>
 56             <div class="item">疑是地上霜</div>
 57             <div class="item">我是郭德纲</div>
 58         </div>
 59     </div>
 60     <script>
 61         function Hua() {
 62             var a = document.body.offsetHeight;//获取body的自身总高度
 63             var b = document.getElementById("content").offsetHeight;//获取内容的总高度
 64             var c = document.documentElement.clientHeight;//获取可见范围的高度（窗口高度）
 65             var huaGao = document.body.scrollTop;//获取滑动的高度
 66             var caiDan = document.getElementById("menu");//获取菜单并赋值
 67             if(huaGao>48){//判断滑动距离大于48
 68                 caiDan.classList.add("fixed");//将菜单栏固定住
 69             }else{//如果滑动距离小于48
 70                 caiDan.classList.remove("fixed");//将菜单栏固定功能去掉
 71             }
 72             var items = document.getElementById("content").children;//获取内容
 73             for(var i=0;i<items.length;i++) {//循环获取的每个内容
 74                 var currentItem = items[i];//获取索引对应的值
 75                 var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;//获取当前标签离body顶部的距离
 76                 var currentItemWindowTop = currentItemBodyTop - huaGao;//距离浏览器顶部高度减去滑动距离
 77 //                console.log(currentItemWindowTop);
 78                 var currentHeight = currentItem.offsetHeight;//当前文档高度
 79                 var bottomHeight = currentItemBodyTop + currentHeight;//文档底部有多高(自身的高度+顶部离body的高度)
 80 
 81                 if((a+b)==(huaGao+c)){//实现第三章内容高度不够划过顶部时的效果
 82                     var mu = document.getElementById("menu").children[0].lastElementChild;
 83                     var lis = document.getElementById("menu").getElementsByTagName("li");
 84                     for(var m=0;m < lis.length;m++){
 85                         var current_list = lis[m];
 86                         if (current_list.getAttribute("class") == 'active'){
 87                             current_list.classList.remove("active");
 88                             break
 89                         }
 90                     }
 91                     mu.classList.add("active");
 92                     return
 93                 }
 94                 
 95                 if(currentItemWindowTop<0 && huaGao<bottomHeight){//实现每一章内容划过顶部然后菜单栏出现对应的效果
 96                     var ziji = caiDan.getElementsByTagName("li")[i];
 97                     ziji.className = "active";//将对应的菜单加上active属性
 98                     var lis = caiDan.getElementsByTagName("li");
 99                     for(var j=0;j<lis.length;j++){
100                         if(ziji == lis[j]){
101 
102                         }else {
103                             lis[j].classList.remove("active")
104                         }
105                     }
106                     break;
107                 }
108             }
109         }
110     </script>
111 </body>
112 </html>

定位菜单

7、提交表单

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

示例：

<body>

<!--提交表单,可以用button替代submit，只要定义一个事件就可以。action提交到哪里，method提交方式-->
    <form id="f" action="http://www.sogou.com/web?" method="get">
        <input name="query" type="text">
        <input type="button" onclick="SubmitForm();" value="提交">
    </form>
    <script>
        function SubmitForm() {
            document.getElementById("f").submit();
        }
    </script>

8、其他操作

 1 console.log                 输出框
 2 alert                       弹出框
 3 confirm                     确认框
 4   
 5 // URL和刷新
 6 location.href               获取当前页面URL
 7 location.href = "url"       重定向（跳转到制定url页面）
 8 location.reload()           重新加载
 9   
10 // 定时器
11 setInterval                 多次定时器
12 clearInterval               清除多次定时器
13 setTimeout                  单次定时器（只执行一次就不执行了）
14 clearTimeout                清除单次定时器

示例：

1 <input type="button" value="confirm" onclick="Firm();">
2  <script>
3         function Firm() {//弹框显示confirm内容
4             var r = confirm("hello");//接收返回值
5             console.log(r);//如果点击确定返回true，如果点取消返回false
6         }
7 </script>

实例：定时器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>其他操作</title>
 6 </head>
 7 <body>
 8 
 9 <!--提交表单,可以用button替代submit，只要定义一个onclick事件就可以。action提交到哪里，method提交方式-->
10     <form id="f" action="http://www.sogou.com/web?" method="get">
11         <input type="button" value="Interval" onclick="Interval();">
12         <input type="button" value="StopInterval" onclick="StopInterval();">
13 
14     </form>
15 
16     <script>
17         function Interval() {
18             s1 = setInterval(function () {//function ()匿名函数.setInterval相当于一个定时器，没隔制定时间执行匿名函数
19                 console.log("s1");
20             },1000);
21             s2 = setInterval(function () {
22                 console.log("s2");
23             },2000);
24             console.log(1);
25         }
26         function StopInterval() {
27             clearInterval(s1);//让s1定时器停止。s1是全局变量
28         }
29     </script>
30 </body>
31 </html>

定时器

定时器之删除和保留

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定时器之删除</title>
 6 </head>
 7 <body>
 8     <div>
 9         <input type="button" value="delete" onclick="Delete();" />
10         <input type="button" value="keep" onclick="UnDelete();" />
11         <div id="status"></div>
12     </div>
13     <script>
14         function Delete() {
15             document.getElementById("status").innerText="已删除";//给id为status赋值内容
16             t1 = setTimeout(ClearStatus,5000);//5秒后执行一次ClearStatus函数
17         }
18         function ClearStatus() {
19             document.getElementById("status").innerText="";
20         }
21         function UnDelete() {
22             clearTimeout(t1);//清除单次定时器
23         }
24     </script>
25 </body>
26 </html>

作用域补充（一）：

强烈推荐武大神绝世经典好博客：http://www.cnblogs.com/wupeiqi/p/5649402.html

JS里面没有块级作用域，只有函数作用域。一个函数就是一个作用域。

JS在定义时已经创建了作用域链，之后按照作用域链来执行。

示例：

 1     <script>
 2         function func() {
 3             for(var i=0;i<3;i++){//当i等于2，自增一为3，此时i=3，再判断时已不满足条件，所以i等于3
 4                 setInterval(function () {//一次生成3个计时器
 5                     console.log(i);//一次输出3个3
 6                 },1000);
 7             }
 8         }
 9         func();
10     </script>

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>作用域</title>
 6 </head>
 7 <body>
 8     <div id="inp">
 9         <input type="button" value="1">
10         <input type="button" value="2">
11         <input type="button" value="3">
12     </div>
13     <script>
14         var btns = document.getElementById("inp").children;
15         for(var j=0;j<btns.length;j++){
16             var current_input = btns[j];//当前input标签
17             current_input.onclick = function () {
18                 alert(j);//alert:3
19             }
20         }
21         //当for循环执行完之后j=3
22     </script>
23 </body>
24 </html>

Pthon中作用域链和JS是一样的。

示例：

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

示例：

li = [lambda :x for x in range(9)]
print(li)
print(li[0])
print(li[0]())

示例：

li = [x for x in range(9)]
print(li)
#打印结果：[0, 1, 2, 3, 4, 5, 6, 7, 8]

示例：

li = [x+10 for x in range(9) if x > 5]
print(li)
#打印结果：[16, 17, 18]

三、事件

对于事件需要注意的要点：

this
event
事件链以及跳出
默认事件和自定义事件

this触发当前事件的标签；event触发当前标签的事件的内容（可监听键盘按键：keyCode）。

注册事件的方式：

方式一：
<div 事件名="函数名()"></div>


方式二：
docuement.get......事件名 = function()

事件绑定示例：

1     <div onmouseover="Func(this);" onmouseout="Out(this);">123</div>
2     <script>
3         function Func(self) {//self表示形参,当前绑定事件参数是this,就表示鼠标移动到当前div
4             self.style.color = "red";
5         }
6         function Out(ths) {//鼠标移动开之后绑定该事件
7             ths.style.color = "black";
8         }
9     </script>

默认事件和自定义事件：

注：自定义事件优先于默认事件

1  <a href="http://www.baidu.com" onclick="return Func();">走你</a>
2     <script>
3         function Func() {
4             alert("确定要跳转到百度首页吗?");
5             return true;
6         }
7     </script>

注：如果Submitform()里面return false,默认事件就不执行；如果return true,就会执行默认事件

示例：

 1 <form action="http://www.sogou.com/web?">
 2         <div id="form1">
 3             <input type="text">
 4         </div>
 5         <input type="submit" value="提交" onclick="return Submitform();">
 6         <!--如果Submitform()里面return false,默认事件就不执行；如果return true,就会执行默认事件-->
 7     </form>
 8 
 9     <script>
10         function Submitform() {
11             var inputs = document.getElementById("form1").getElementsByTagName("input");//获取input标签
12             for(var i=0;i<inputs.length;i++){//循环
13                 var currentInput = inputs[i];//获取循环到的input标签
14                 var val = currentInput.value;//取值
15                 if(val.trim().length == 0){//判断将值去除空格，并且长度等于0
16                     alert("请输入内容");
17                     return false;
18                 }
19             }
20             return true;
21         }
22     </script>

查看全文

相关阅读:
ls命令具有一个r选项，可以递归的列出子目录中的内容。请编写一个具有同样功能的程序。
BizTalk Server 2006 正式发布了，有120天试用版可以下载无为而为
 IT人看《国富论》系列：第一篇之第四章：论货币的起源及其效用。UML是软件行业的货币无为而为
 使用XPathNavigator和XPathExpression求出XPath的值，[源代码] 无为而为
 为XPath自定义函数（因为XPath1.0的函数非常有限）[附源代码下载] 无为而为
 IT人看《国富论》系列：第一篇之第二章：论分工的原由。分工其实是人类利己倾向的结果无为而为
 非常令人沮丧的是，SQL 2005 发布的 Web EndPoint不支持匿名访问无为而为
 Team Foundation Server Workgroup Edition 5 用户限制到底是如何限制的呢？无为而为
 微软发布新的MSN ToolBar V2.5，包含桌面搜索，Outlook搜索，支持IE的选项卡浏览模式无为而为
 IT人看《国富论》系列：第一篇之第三章：论分工受市场范围的限制。外国人都觊觎的中国市场到底大还是不大？无为而为

原文地址：https://www.cnblogs.com/0820-zq/p/5651768.html