一、简介

1、什么是DOM

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

2、DOM结构

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

树中所有的框都是节点，文本也是一个节点

包括：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。这是一个初学者的易错点。

二、查找DOM对象

1、直接查找

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

2、间接查找

　　获得节点node,包含所有类型的node节点。

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

　　获得元素element，仅包含element标签元素的节点。

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

　　一个例子说明上面两种方法的区别

<div id="t1">
     文本
    <p>123</p>
</div>

3、操作DOM对象

1、文本操作

innerText 　　　　 //所有的纯文本内容，包括子标签中的文本
innerHTML 　　　　//所有子节点(包括元素、注释和文本节点)
outerHTML 　　　　//返回自身节点与所有子节点

value 　　　　　　//表单元素的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="d1"><span>文本操作</span></div>
    </div>
    <input  id ="d2" type="text" value="123">
 
    <script>
        var e = document.getElementById("d1");
        var i = document.getElementById("d2")
        console.log(e.innerHTML)
        console.log(e.outerHTML)
        console.log(e.innerText)
        console.log(i.value)
 
    </script>
</body>
</html>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM元素取值操作</title>
 
<!--表单类标签取值使用value-->
</head>
<body>
    <p id="pp">正常标签<span>span</span></p>
<!-- ------------------------------------------------------>
    <fieldset>
        <legend>文本输入样例组</legend>
        <label>文本输入框：</label><input  id='i1' type="text" value="原始字符" />
        <label>密码框：</label><input id='i2' type="password" value="123" />
        <label>多行文本输入：</label><textarea  id="i3">value </textarea>
    </fieldset>
        <!-----------------------chexkbox----------------------------->
    <fieldset>
        <legend>选择样例组</legend>
        <ul id="check-box">
            <li><input type="checkbox" value="1" checked="checked"/>篮球</li>
            <li><input type="checkbox" value="2"/>足球</li>
            <li><input type="checkbox" value="3"/>排球</li>
        </ul>
        <ul id="radio-test">
             <!--name一样才能同组互斥-->
            <li><input type="radio" value='11' name="text" checked="checked"/>男</li>
            <li><input type="radio" value='22' name="text"/>女</li>
            <li><input type="radio" value='33' name="text"/>人妖</li>
        </ul>
        <select id="select-test">
            <option value="11">北京</option>
            <option value="22" selected="selected">上海</option>
            <option value="33">广州</option>
            <option value="44">深证</option>
        </select>
    </fieldset>
 
<!---------------------radios------------------->
    <script>
        pp_text_value = document.getElementById('pp').innerText //"正常标签span"
        pp_html_value = document.getElementById('pp').innerHTML//"正常标签<span>span</span>"
//        ----------------------------------------------------------------------------------------
//        text  password    textarea
        i1=document.getElementById('i1').value//要设置值直接用i1=xxx
        i2=document.getElementById('i2').value
        i3=document.getElementById('i3').value
//        -------------------------------------------------------------------------------
//        checkbox
        ul_box=document.getElementById('check-box')
        var inputs = ul_box.getElementsByTagName('input')
//        for(var item in inputs){
//            console.log(inputs[item].value)
//        }这种方法有多余的数据出现
         for(var  index=0; index<inputs.length;index++ ){
             console.log(inputs[index].value)   //获取值，1 2   3
             console.log(inputs[index].checked) //获取选中状态， true  ,   false   ，false
         }
 
//        ------------------radio--------------------------------------
        var radio_test=document.getElementById('radio-test')
        var radios = radio_test.getElementsByTagName('input')
        for(var index=0;index<radios.length;index++){
            console.log(radios[index].value)    //获取值，11 22   33
            console.log(radios[index].checked)  //获取选中状态， true  ,   false   ，false
        }
//-----------------------select-------------------------------
        var sel_ele=document.getElementById('select-test')
        var sel_value=sel_ele.value     //获取当前元素值
        var sel_selindex=sel_ele.selectedIndex  //获取当前选中项索引
 
    </script>
 
</body>
</html>

表单类的value和checked操作

运行结果

2、attrbute属性操作

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

3、class类操作

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .bg-color{background-color: red}
    .w{width: 100px}
    .col{color:green}
 
</style>
</head>
 
<body>
    <div id="d1" class="bg-color w col">cangsong</div>
 
    <script>
       var d=document.getElementById("d1")
        console.log(d.className)    //bg-color w col
        console.log(d.classList)    //["bg-color", "w", "col", value: "bg-color w col"]
        d.classList.remove("col")
        console.log(d.className)    //bg-color w
        d.classList.add("col")
        console.log(d.className)    //bg-color w col
 
    </script>
</body>
</html>

class类操作

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、style样式操作

style.cssText			//可对style中的代码进行读写
style.item()			//返回给定位置的CSS属性的名称
style.length			//style代码块中参数个数
style.getPropertyValue()	//返回给定属性的字符串值
style.getPropertyPriority()	//检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串
style.removeProperty()		//删除指定属性
style.setProperty()		//设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1" style="background-color: yellow; width: 100px; height: 100px">style test</div>
 
    <script>
        var d1 = document.getElementById("d1");
        console.log(d1.style.cssText); //width: 100px; height: 100px; background-color: yellow;
        d1.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性
        console.log(d1.style.cssText); //width: 200px; height: 200px; background-color: yellow;
        console.log(d1.style.item("0")); //background-color
        console.log(d1.style.length); //3
        console.log(d1.style.getPropertyValue("background-color")); //yed1llow
        console.log(d1.style.getPropertyPriority("background-color")); //空字符串
        console.log(d1.style.removeProperty("width")); //200px
        d1.style.setProperty("width","200px",""); //设置属性，第三个值为important优先值，可不写
 
    </script>
</body>
</html>

6、提交表单

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

7、位置相关

document.documentElement.offsetHeight    　　//全文文档总高度
document.documentElement.clientHeight    　　//浏览器可视区域高度。（随着窗口大小变化）
tag.offsetHeight                            //tag自身高度（height + padding + border）
tag.offsetTop                                //距离上级标签定位高度
tag.clientHeight                            //tag可视区域：height + padding
tag.clientTop                                //tag的border高度
tag.scrollHeight                            //tag全文文档高度（height + padding）
tag.scrollTop                                //tag已滚动高度(随滚动变化)
tag.offsetParent　　　　　　　　　　　　　　　　　//tag相对偏移的父级标签元素

<!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;overflow: scroll">
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <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(document.documentElement.clientHeight)  //窗口可视区域高度
        console.log(document.documentElement.offsetHeight)  //全文文档总高度
        console.log('=====');
        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);      // 已滚动高度
 
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .container{
            height:2000px;
            width:100%;
        }
        #top{
            background-color: aqua;
            height: 50px;
            width:50px;
            padding:10px;
            position: fixed;
            bottom:30px;
            right: 30px;
        }
        .hide{
            display: none;
        }
    </style>
    <title>返回顶部</title>
</head>
<body onscroll="scroll()">
<div class="container">
    <div id="top" class="hide" onclick="gotop()">
        <a href="javascript:void(0)"  >返回顶部</a>
    </div>
    <div class="content">
        <h1>本实例知识点：</h1>
            <p>1、 onscroll="gotop()"要要用在监听的元素上。本例为body边标签。</p>
            <p>2、document.body.scrollTop监听离元素滚轮顶部的距离。</p>
            <p>3、 a href="javascript:void(0)"，使得点击a标签不刷新页面。</p>
            <p>4、返回顶部设置document.body.scrollTop=0</p>
 
    </div>
</div>
<script>
    function scroll() {
        var scrolltop=document.body.scrollTop
        if (scrolltop>100){
            document.getElementById("top").classList.remove("hide")
        }else {
             document.getElementById("top").classList.add("hide")
        }
    }
    function gotop() {
        document.body.scrollTop=0
 
    }
</script>
</body>
</html>

返回顶部样例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clearfix:after{
            content: 'clearfix';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
 
        .header{
            height:50px;
            background-color: black;
        }
        .container{
            width: 1100px;
            margin: 0 auto;
        }
        .menu{
            width: 200px;
            float: left;
            background-color: coral;
        }
        .content{
            width: 870px;
            background-color: blanchedalmond;
            margin-left: 20px;
            float: right;
        }
        .fixed{
            position: fixed;
            top:10px;
        }
        .section{
            border: 1px solid red;
            height: 300px;
            width: 865px;
        }
    </style>
</head>
<body onscroll="scrollEvent()">
    <div class="header"></div>
    <div class="container clearfix">
        <div id="menu" class="menu">
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
            </ul>
        </div>
        <div class="content">
            <div class="section">第一章内容</div>
            <div class="section">第二章内容</div>
            <div class="section">第三章内容</div>
        </div>
    </div>
 
    <script>
        function scrollEvent() {
            var sh= document.body.scrollTop //  滚轮已滚高度
            var menu=document.getElementById("menu")
            if (sh>50){
 
                menu.classList.add("fixed")
            }else {
                menu.classList.remove("fixed")
            }
        }
 
    </script>
</body>
</html>

固定左侧菜单栏

（接固定菜单往下做）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clearfix:after{
            content: 'clearfix';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
 
        .header{
            height:50px;
            background-color: black;
        }
        .container{
            width: 1100px;
            margin: 0 auto;
        }
        .menu{
            width: 200px;
            float: left;
            background-color: coral;
        }
        .content{
            width: 870px;
            background-color: blanchedalmond;
            margin-left: 20px;
            float: right;
        }
        .fixed{
            position: fixed;
            top:10px;
        }
        .section{
            border: 1px solid red;
            height: 300px;
            width: 865px;
        }
        .active{
            background-color: blue;
        }
    </style>
</head>
<body onscroll="scrollEvent()">
    <div class="header"></div>
    <div class="container clearfix">
        <div id="menu" class="menu">
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
            </ul>
        </div>
        <div class="content">
            <div class="section">第一章内容</div>
            <div class="section">第二章内容</div>
            <div class="section">第三章内容</div>
        </div>
    </div>
 
    <script>
        function scrollEvent() {
            var sh= document.body.scrollTop //  滚轮已滚高度
            var menu=document.getElementById("menu")
            if (sh>50){
 
                menu.classList.add("fixed")
            }else {
                menu.classList.remove("fixed")
            }//实现菜单固定显示
 
            var sections = document.getElementsByClassName("section")
            var menu_section=document.getElementsByTagName("li")
            for (i=0;i<sections.length;i++){
 
                var secParent=sections[i].offsetParent  // 章节相对偏移的父元素。content
                //sections[i].offsetTop章节元素偏移高度+父元素偏移高度secParent.offsetTop-滑动的高度=章节元素相对于视口顶部的高度。
                //小于0，说明章节元素顶部即将超出视口，可以激活。
                var secOffect= sections[i].offsetTop+secParent.offsetTop-sh
                var secHeight=sections[i].offsetHeight  //章节元素自身高度
                var secBottomOffect=secOffect+secHeight //章节元素底部距离浏览器视口高度。
 
                //元素顶部偏移超出视口，底部偏移还未超出是，机会该章节。一旦有章节匹配不再往下判断，break
                if(secOffect<0 && secBottomOffect>0){
                    curr_menu_section= menu_section[i]
                    curr_menu_section.classList.add("active");
                    //清除其他章节的active
                    for(j=0;j<menu_section.length;j++){
                        if(curr_menu_section!=menu_section[j]){
                            menu_section[j].classList.remove("active");
                        }else {}
                    }
 
                    break;
                }
            }
 
        }
 
    </script>
</body>
</html>

固定菜单的同时，随内容滚动目录

8、定时器

setInterval         //多次定时器（毫秒计时），第一次不立即执行
clearInterval    　 //清除多次定时器
setTimeout        　//单次定时器
clearTimeout    　　//清除单次定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="Interval" onclick="Interval();" />
    <input type="button" value="StopInterval" onclick="StopInterval();" />
    <script>
        function Interval() {
            s1 = setInterval(function () {
                console.log(123);
            }, 1000);
            s2 = setInterval(function () {
                console.log(456);
            }, 2000);
            console.log(1);
        }
        function StopInterval() {
            clearInterval(s1);
            clearInterval(s2);
        }
    </script>
</body>
</html>

定时器样例

9、弹出框

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="consolelog" onclick="console_log();" />
    <input type="button" value="alert" onclick="test_alert();" />
    <input type="button" value="confirm" onclick="test_confirm();" />
    <script>
        function console_log() {
            console.log("后台输出数据")//要在后台调试界面console界面看到
        }
        function test_alert() {
            alert("测试alert")
        }
        function test_confirm() {
            confirm("测试confirm")
        }
 
    </script>
</body>
</html>

弹出框测试样例

10.localtion

location.href = "url"	获取URL重定向
location.assign("http://www.cnblogs.com/suoning")		重定向到URL
location.search = "wd=suoning"		修改查询字符串(百度搜索)
location.hostname		服务主机名，例：www.cnblogs.com
location.pathname		路径，例：suoning
location.port			端口号
location.reload()		重新加载

11、其他BOM相关

navigator        包含有关浏览器的信息
screen            包含有关客户端显示屏幕的信息
history            包含用户(在浏览器窗口中)访问过的 URL
window.print();    显示打印对话框

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);
//无参数时，刷新当前页面
history.go()
 
//后退一页
history.back()
//前进一页
history.forward()

history相关方法

4、DOM事件

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

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 lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        ul {
            margin:0;
            padding:0;
 
        }
        ul li{
            line-height: 44px;
            text-align: center;
            list-style: none;
            float: left;
            margin:0;
            padding-left: 10px;
            padding-right: 10px;
        }
        .clearfix:after{
            display: block;
            content:'.';
            height:0;
            visibility: hidden;
            clear: both;
        }
        .hide{
            display:none;
        }
        .active{
            background-color: white;
            border-bottom: none;
        }
        .container{
            width: 100%;
        }
        .title{
            height:44px;
            background-color: bisque;
            border:1px solid black;
            border-bottom: none;
            margin: auto 10% ;
        }
        #content{
            margin: auto 10%;
            background-color: white;
            border: 1px solid black;
            border-top: none;
            max-height:500px;
            min-height:100px;
            overflow: scroll;
        }
    </style>
    <title>Tab菜单实例</title>
</head>
<body>
<div class="container">
    <div class="title"  class="clearfix">
        <ul id="i1">
            <!--this表示元素本身-->
            <li title="1" onclick="show(this)" class="active">title1</li>
            <li title="2" onclick="show(this)">title2</li>
            <li title="3" onclick="show(this)">title3</li>
        </ul>
    </div>
    <div id="content">
        <div content="1" >
            <h1>本例知识点：</h1>
            <p>1/onclick="show(this)" this特质本元素。</p>
            <p>2、classList.remove('active') 移除class中的active，用于class操作</p>
            <p>3、ths.className获取class名，设置值直接ths.className="active"</p>
            <p>3、tag.getAttribute("content")获取tag标签中：“content"属性的值。标题和内容关联用标签值来关联。</p>
            <h1>4、max-height:500px;最大高度min-height:100px;最小高度</h1>
            <h1>content1</h1>
            <h1>content1</h1>
            <h1>content1</h1>
            <h1>content1</h1>
            <h1>content1</h1>
 
        </div>
        <div content="2"  class="hide">content2</div>
        <div content="3"  class="hide">content3</div>
    </div>
</div>
 <script>
     function show(ths) {
//         ths表示元素自身，本函数点击自身添加active样式，兄弟节点移除active样式、
         ths.className="active"
         var brothers = ths.parentElement.children
         for(var i=0;i<brothers.length;i++){
             if (ths==brothers[i]){
                 continue
             }else {
                 brothers[i].classList.remove('active')
             }
         }
         var title_tab=ths.getAttribute("title")
         var father =document.getElementById("content")
         var contents = father.children
//         console.log(contents)
         for(var i=0;i<contents.length;i++){
             if(contents[i].getAttribute("content")==title_tab){
                 contents[i].classList.remove("hide")
             }else {
                 contents[i].classList.add("hide")
             }
         }
     }
 
 </script>
</body>
</html>

TAB标签页

详细参考手册：

　　http://www.w3school.com.cn/jsref/index.asp

参考文章：

　　http://www.cnblogs.com/wupeiqi/articles/5643298.html

　　http://www.cnblogs.com/suoning/p/5656922.html

DOM基础总结的更多相关文章

HTML DOM基础知识
HTML DOM基础知识一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
BOM基础计时器定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

HBase-再看HBase
为什么HBase主要应用于在线应用系统?(还没搞懂) www.github.com/HBaseinaction google 三大论文 Google File System MapReduce Bi ...
G - Just a Hook
Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of t ...
Android进阶笔记06：Android 实现扫描二维码实现网页登录
一. 扫描二维码登录的实现机制: 详细流程图: (1)PC端打开网页(显示出二维码),这时候会保存对应的randnumber(比如:12345678). (2)Android客户端扫码登录,Andro ...
在vs中跑动ransac
期间遇到很多问题. 记一个最主要的是: LINK2019 无法识别的外部符号,然后某一个函数的函数名然后是 @@函数名 (@) 大概长成这样.或者还就根本就是无法识别的外部符号. 解决方案: 我这 ...
MSP430常见问题之AD转换类
Q1:MSP430F149 AD 的输入阻抗有多大?A1:RC<2000欧*30PF Q2:MSP430 ADC12 模块的速度?A2: ADC12 的转换速率是转换所需的ADC12CLK 以及 ...
关于css制作圆角
三个阶段: 1.背景图片: 2.css2.0+标签模拟圆角: 3.css3.0圆角属性(border-radius). 1.1.背景图片--宽度固定,高度自适应圆角为容器设置宽度在主体的上方加一个 ...
Android实现双进程守护（转）
做过android开发的人应该都知道应用会在系统资源匮乏的情况下被系统杀死!当后台的应用被系统回收之后,如何重新恢复它呢?网上对此问题有很多的讨论.这里先总结一下网上流传的各种解决方案,看看这些办法是 ...
U大师装系统
主要步骤 1. 若是ghost版本,直接使用智能快速装机版即可安装. 2.安装64位操作系统(iso文件) 1)下载系统地址 http://msdn.itellyou.cn/ . 2)制作好U盘启动, ...
C# WCF学习笔记（二）终结点地址与WCF寻址(Endpoint Address and WCF Addressing) WCF中的传输协议
URI的全称是 Uniform Rosource Identifire(统一资源标识),它唯一标识一个确定的网绐资源,同时也表示资源所处的位置及访问的方式(资源访问所用的网络协议). 对于Endpoi ...
android64位机子兼容32位.so库文件
http://blog.csdn.net/vhawk/article/details/49964475 猴子在调用高德地图的时候,遇到一个操作系统兼容问题,异常堆栈说是找不到so库文件,猴子就不懂了, ...

DOM基础总结