文档对象模型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 ...

随机推荐

Css3新特性应用之视觉效果
一.单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow:水平阴影的位置,允许负值 v-sh ...
用java单例模式实现面板切换
1.首先介绍一下什么是单例模式: java单例模式是一种常见的设计模式,那么我们先看看懒汉模式: public class Singleton_ { //设为私有方法,防止被外部类引用或实例 priv ...
Xcode7使用插件的简单方法&&以及怎样下载到更早版本的Xcode
Xcode7自2015年9上架以来也有段时间了, 使用Xcode7以及Xcode7.1\Xcode7.2的小伙伴会发现像VVDocumenter-Xcode\KSImageNamed-Xcode\HO ...
iOS xml文件的解析方式 XMLDictionary，GDataXMLNode，NSXMLParser
iOS9之后,默认网络请求是https,所有我们要设置一下网络安全,具体设置如下 1.第三方类库 XMLDictionary 下载地址: https://github.com/nicklockwood ...
h5嵌入视频遇到的bug及总结
最近做的一个h5活动因为嵌入视频而发现了好多以前从未发现的问题,在测试的时候不同系统不同版本不同环境等多多少少都出现了些问题,搞得我也是焦头烂额的,不过好在最终问题都解决了,自己也学到了好多东西,为了 ...
javascript - 状态模式 - 简化分支判断流程
状态模式笔记当一个对象的内部状态发生改变时,会导致行为的改变,这像是改变了对象状态模式既是解决程序中臃肿的分支判断语句问题,将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次 ...
centos7中没有安装ifconfig命令的解决方法
初装centos 7时,运行config报 command not found 错误,我在网上找了大量资料,下面的资料中查找原因和解决方式最详细,能很好的解决这个问题. ifconfig命令是设置或显 ...
【linux】free命令中cached和buffers的区别
一.命令 [root@localhost ~]# free -m total used free shared buffers cached Mem: 7869 7651 218 1 191 5081 ...
ubuntu 安装 vmware 12
安装VMware Workstation 12 ubuntu15.10安装VMware Workstation12的步骤如下: 1.在 https://download3.vmware.com/sof ...
.net core ClaimsPrincipal Class
hClaimsPrincipal Class ttps://msdn.microsoft.com/en-us/library/system.identitymodel.services.claimsp ...

JavaScript进阶之DOM