文档对象模型DOM

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

一、查找元素

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 // 上一个兄弟标签元素

节点和标签元素的区别：节点会把所有元素列出来包括换行符,标签元素只列出标签元素和文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p id="p1">测

    <span>99999</span>

    试</p>

<script>

    var t = document.getElementById('p1')

    var t1 = t.childNodes;

    var t2 = t.children;

    console.log(t1);

    console.log(t2);

</script>

</body>

</html>

效果：

二、操作元素

1.内容

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
value 获取input标签的值

innerHTML、outerHTML、innerText、outerText区别：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>

    <script language="JavaScript" type="text/javascript">

　　//.innerHTML

　　function innerHTMLDemo()

　　{

　　　test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";

　　}

　　//.innerText

　　function innerTextDemo()

　　{

　　　test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";

　　}

　　//.outerHTML

　　function outerHTMLDemo()

　　{

　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";

　　}

　　//.outerText

　　function outerTextDemo()

　　{

　　　test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";

　　}

　　</script>

　　</head>

　　<body>

　　<ul>

　　<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>

　　<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>

　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>

　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>

　　</ul>

　　</body>

　　</html>

结果：
请复制代码到此，提交查看：
http://www.w3school.com.cn/tiy/t.asp?f=html_basic

不同之处:　
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
　　
　　
value实例：
利用value，搜索框默认显示请输入关键字，当鼠标点击进去之后，删除请输入关键字，当鼠标点击其他地方之后，如果搜索框有内容，则显示输入的内容，没有则继续显示请输入关键字

代码：
　　

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input id="i1" type="text" value="请输入关键字"  onfocus="Foncs()" onblur="Blur()"/>

    <script type="text/javascript">

        function Foncs() {

            var tag = document.getElementById('i1');

            if (tag.value == "请输入关键字") {

                tag.value = '';

            }

        }

        function Blur() {

            var tag = document.getElementById('i1');

            var val = tag.value;

            if (val.trim().length == 0) {

                tag.value = "请输入关键字";

            }

        }

    </script>

</body>

</html>

结果：
请复制代码到此，提交查看：
http://www.w3school.com.cn/tiy/t.asp?f=html_basic　　
　　
　　

2.属性

attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性

全选、反选、取消示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="button" value="全选" onclick="ChoiceALL()"/>

<input type="button" value="取消" onclick="CancleALL()"/>

<input type="button" value="反选" onclick="ReversALL()"/>

<table border="">

    <thead>

        <tr>

            <td>序号</td>

            <td>用户</td>

            <td>密码</td>

        </tr>

    </thead>

    <tbody id="tb">

        <tr>

            <td>

                <input type="checkbox" />

            </td>

            <td>

                张三

            </td>

            <td>

                123

            </td>

        </tr>

            <td>

                <input type="checkbox" />

            </td>

            <td>

                张三

            </td>

            <td>

                123

            </td>

        </tr>

            <td>

                <input type="checkbox" />

            </td>

            <td>

                张三

            </td>

            <td>

                123

            </td>

        </tr>

    </tbody>

</table>

<script type="text/javascript">

    function ChoiceALL() {

        var tb = document.getElementById('tb');

        var trs = tb.children;

        for (i=0;i<trs.length;i++) {

            var current_tr = trs[i];

            var ck = current_tr.firstElementChild.firstElementChild;

//            ck.setAttribute('checked','checked');

            ck.checked = true;

        }

    }

    function CancleALL() {

        var tb = document.getElementById('tb');

        var trs = tb.children;

        for (i=0;i<trs.length;i++) {

            var current_tr = trs[i];

            var ck = current_tr.firstElementChild.firstElementChild;

//            ck.removeAttribute('checked');

            ck.checked = false;

        }

    }

    function ReversALL() {

        var tb = document.getElementById('tb');

        var trs = tb.children;

        for (i=0;i<trs.length;i++) {

            var current_tr = trs[i];

            var ck = current_tr.firstElementChild.firstElementChild;

            if(ck.checked) {

                ck.checked = false;

            } else {

                ck.checked = true;

            }

        }

    }

</script>

</body>

</html>

3.class 类

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

通过对class类的增删，实现对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<style>

        .hide{

            display: none !important;

        }

        .shade{

            position: fixed;

            top:0;

            bottom: 0;

            left: 0;

            right: 0;

            /*background-color: black;*/

            /*opacity: 0.6;*/

            background-color: rgba(0,0,0,.6);

            z-index: 1000;

        }

        .modal{

            height: 200px;

            width: 400px;

            background-color: white;

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -200px;

            margin-top: -100px;

            z-index: 1001;

        }

    </style>

    <div style="height: 500px ;width: 100%">

        <input type="button" value="点我"  onclick="showhide()"/>

    </div>

    <div id="d1" class="shade hide"></div>

    <div id="d2" class="modal hide">

        <a href="javascript:void(0)" onclick="undisplayhide()">取消</a>

    </div>

    <script type="text/javascript">

        function showhide() {

            var d1 = document.getElementById('d1');

            var d2 = document.getElementById('d2');

            d1.classList.remove('hide');

            d2.classList.remove('hide');

        }

        function undisplayhide() {

            var d1 = document.getElementById('d1');

            var d2 = document.getElementById('d2');

            d1.classList.add('hide');

            d2.classList.add('hide');

        }

    </script>

</body>

</html>

4.标签

创建标签

方式1：使用对象创建标签，并添加对应的属性

var tag = document.createElement('a')    创建a标签

tag.innerText = "fuzj"      添加a标签中文本内容

tag.className = "c1"            给a标签应用class c1的样式

tag.href = "http://www.cnblogs.com/pycode"  给a标签添加href属性

方式2：采用字符串的形式，将标签和属性作为字符串

var tag = "<a class='c1' href='http://www.cnblogs.com/pycode'>fuzj</a>"

操作标签

对象创建方式操作

var d = document.getElementById('d')   //获取要插入的标签

    d.insertAdjacentElement('beforeEnd',tag)

字符串形势操作

var d = document.getElementById('d');   //获取要插入的标签

    d.insertAdjacentHTML('beforeEnd',tag);

插入的位置说明：

beforeBegin 在本标签前面添加
afterBegin 在本标签的子标签前面添加
beforeEnd 在本标签的子标签后面添加
afterEnd 在本标签后面添加

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="d">

    <p>p标签1</p>

    <p>p标签2</p>

</div>

<script>

    var tag1 = "<span>beforeEnd</span>";

    var tag2 = "<span>afterEnd</span>";

    var tag3 = "<span>beforeBegin</span>";

    var tag4 = "<span>afterBegin</span>";

    var d = document.getElementById('d');   //获取要插入的标签

    d.insertAdjacentHTML('beforeEnd',tag1);

    d.insertAdjacentHTML('afterEnd',tag2);

    d.insertAdjacentHTML('beforeBegin',tag3);

    d.insertAdjacentHTML('afterBegin',tag4);

</script>

</body>

</html>

补充：
还有一种方式添加标签

appendChild 添加到指定子节点
insertBefore 在现有的子节点前插入一个新的子节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="d">

    <p>p标签1</p>

    <p>p标签2</p>

</div>

<script>

    var tag1 = document.createElement('span');

    var tag2 = document.createElement('span');

    tag1.innerText = 'appendChild';

    tag2.innerText = 'insertBefore';

    var d = document.getElementById('d');   //获取要插入的标签

    d.appendChild(tag1);

    d.insertBefore(tag2,d.childNodes[0]);    //d.choildNodes获取d的所有子节点

</script>

</body>

</html>

5.样式操作

dom对样式操作直接在节点对象后面加.style.对应的样式，注意，类似font-size 变为fontSize，没有了－

var obj = document.getElementById('i1')

obj.style.fontSize = "32px";

obj.style.backgroundColor = "red";

点赞案例：通过循环动态修改样式，实现点赞＋1的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .iterm {

            padding: 50px;

            position: relative;

        }

    </style>

</head>

<body>

<div>

    <div class="iterm">

        <a onclick="zan(this)">赞1</a>

    </div>

    <div class="iterm">

        <a onclick="zan(this)">赞2</a>

    </div>

    <div class="iterm">

        <a onclick="zan(this)">赞3</a>

    </div>

    <div class="iterm">

        <a onclick="zan(this)">赞4</a>

    </div>

</div>

<script type="text/javascript">

    function zan(ths) {

        var top = 50;

        var left = 70;

        var op = 1;

        var fontSize = 18;

        var tag = document.createElement('span')

        tag.innerText = "+1";

        tag.style.position = 'absolute';

        tag.style.top = top + "px";

        tag.style.left = left + "px";

        tag.style.opacity = op;

        tag.style.fontSize = fontSize + "px";

        ths.parentElement.appendChild(tag);

        var interval = setInterval(function() {

            top -= 10;

            left +=10;

            op -= 0.2;

            fontSize +=5;

            tag.style.top = top + "px";

            tag.style.left = left + "px";

            tag.style.opacity = op;

            tag.style.fontSize = fontSize + "px";

            if (op <= 0.2) {

                clearInterval(interval);

                ths.parentElement.removeChild(tag);

            }

        },50)

    }

</script>

</body>

</html>

效果可复制代码至http://www.w3school.com.cn/tiy/t.asp?f=html_basic，进行查看

6.位置操作

clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
offsetHeight和offsetWidth用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分
clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回nul

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="divParent" style="padding: 8px; background-color: #aaa; position: relative;">

        <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;height: 200px; width: 200px; border: solid 3px #f00;">

        </div>

    </div>

<script type="text/javascript">

        var div = document.getElementById('divDisplay');

        var clientHeight = div.clientHeight;

        var clientWidth = div.clientWidth;

        div.innerHTML += 'clientHeight: ' + clientHeight + '<br/>';

        div.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';

        var clientLeft = div.clientLeft;

        var clientTop = div.clientTop;

        div.innerHTML += 'clientLeft: ' + clientLeft + '<br/>';

        div.innerHTML += 'clientTop: ' + clientTop + '<br/>';

        var offsetHeight = div.offsetHeight;

        var offsetWidth = div.offsetWidth;

        div.innerHTML += 'offsetHeight: ' + offsetHeight + '<br/>';

        div.innerHTML += 'offsetWidth: ' + offsetWidth + '<br/>';

        var offsetLeft = div.offsetLeft;

        var offsetTop = div.offsetTop;

        div.innerHTML += 'offsetLeft: ' + offsetLeft + '<br/>';

        div.innerHTML += 'offsetTop: ' + offsetTop + '<br/>';

        var offsetParent = div.offsetParent;

        div.innerHTML += 'offsetParent: ' + offsetParent.id + '<br/>';

    </script>

</body>

</html>

效果可复制代码至http://www.w3school.com.cn/tiy/t.asp?f=html_basic，进行查看

其他：

 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>

<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.js提交表单

表单form 提交的时候需要使用typ=submit的元素，我们还可以使用js，实现提交表单
document.geElementById('form').submit()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form id="f1">

    <input id="inp" type="text">

    <input  type="submit" value="提交">

    <a onclick="dianji()">提交</a>

</form>

<script>

    function dianji() {

        var fm = document.getElementById('f1');

        var inp = document.getElementById('inp');

        if (inp.value.length > 0) {

            fm.submit();

        } else {

            alert('不能为空')

        }

    }

</script>

</body>

</html>

8.其他操作

console.log 输出框，在chrome开发视图的console下输出
alert 弹出框。
confirm 确认框弹出是否确认，

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

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

三.事件

属性	当以下情况发生时，出现此事件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

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

this
event
事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容

JavaScript进阶之DOM的更多相关文章

JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
javascript进阶——分离式DOM脚本编程
编写分离式(unobstrusive)代码意味着对HTML内容的完全分离:数据来自服务器端,javascript代码用来动态化和交互.这种分离的好处是在不同浏览器之间使用是可以完全降级或升级运行,对于 ...
Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...
Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...
＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

随机推荐

原生JS实战：写了个一边玩游戏，一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
使用PowerShell修改操作系统“环境变量”
有时候我们需要命令行工具,但在使用前往往需要先导航至命令工具所在的目录,比如:stsadm 我们首先需要导航至(以SharePoint2013为例):C:\Program Files\Common ...
java 堆栈理解
Java 中的堆和栈堆和栈:分为数据结构的堆和栈以及内存中的堆和栈,两种理解应区分开. 数据结构中的堆: 堆实际上指的就是(满足堆性质的)优先队列的一种数据结构,第1个元素有最高的优先权. 堆性质: ...
Hibernate 系列 05 - Session 类
引导目录: Hibernate 系列教程目录前言: Session是Hibernate运作的中心,对象的生命周期.事务的管理.数据库的存取都与Session息息相关. 就如同在编写JDBC时需要关 ...
多值（in），范围值（between..and）
多值检测关键词[in] 查出年龄是23,24,28 的人员信息 select * from T_Employee where FAge in (23,25,28) in 后面如果跟子查询, ...
Webform（五）——内置对象（Response、Request）和Repeater中的数据增删改
一.内置对象 (一)Response对象 1.简介:response 对象在ASP中负责将信息传递给用户.Response对象用于动态响应客户端请求,并将动态生成的响应结果返回到客户端浏览器中,使用R ...
3.awk数组详解及企业实战案例
awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...
[转]How do you create a custom AuthorizeAttribute in ASP.NET Core?
问: I'm trying to make a custom authorization attribute in ASP.NET Core. In previous versions it was ...
Boolean()值为false的五个特殊值
在if.while等需要判断条件时,会调用函数Boolean()对判断条件进行隐式转换,而只有五个特殊值才会返回false 这五个值是:undefined, null, "", 0 ...
iOS CALayer应用详解
跟着大神一起进步,本篇博客原文地址:http://blog.csdn.net/hello_hwc?viewmode=contents 一 CALayer是什么? Layers是绘图和动画的基础, L ...

JavaScript进阶之DOM