前端学习之-- DOM

Dom == document

1：查找
　　1：直接查找
　　document.getElementById('i1') # 根据ID获取一个标签（获取单个元素）
　　document.getElementsByTagName('div') # 根据标签名获取标签集合（获取多个元素列表）
　　document.getElementsByClassName('c1') # 根据class属性获取标签集合（获取多个元素列表）
　　document.getElementsByName('n1') # 根据name属性获取标签集合
　　举例说明：
　　document.getElementById('i1') # 打印标签及内容
　　document.getElementById('i1').innerText # 打印标签里的内容
　　document.getElementById('i1').innerText = '学员jack' # 修改标签里的内容

　　document.getElementsByTagName('a') # 以数组格式返回所有的a标签
　　document.getElementsByTagName('a')[1] # 根据索引提取指定的标签
　　document.getElementsByTagName('a')[1].innerText # 提取指定标签里的内容
　　document.getElementsByTagName('a')[1].innerText = 'test' # 修改标签内容

2：间接查找
　　首先通过直接找定义要查找的标签，然后通过下面的方法进行间接找
　　　　- parentNode 父节点
　　　　- childNodes 所有子节点
　　　　- firstChild 第一个子节点
　　　　- lastChild 最后一个子节点
　　　　- nextSibing 下一个兄弟节点
　　　　- previousSibling 上一个兄弟节点

　　以下为重点掌握
　　　　- parentElement 父节点标签元素

　　　　- children 所有子标签
　　　　- firstElementChild 第一个子标签元素
　　　　- lastElementChild 最后一个子标签元素

　　　　- nextElementSibling 下一个兄弟标签元素
　　　　- previousElementSibling 上一个兄弟标签元素
　　举例：
　　tag = document.getElementById('i2') # 定位标签
　　tag.parentNode.previousElementSibling.children[1].innerText # 打印父标签的上一兄弟标签下的子标签索引号为1的内容
2：操作
　　1：文本内容操作
　　innerText：可获取标签内的文本，修改也只能是文本
　　效果如下：
　　　　<div id='i1'>oldboy <a>google</a></div>
　　　　通过ID查找后使用innerText显示输出如下：
　　　　oldboy google 表示内部的a标签已被忽略
　　innerHTML：获取标签内的全部内容，修改可以是标签内容。
　　效果如下：
　　　　<div id='i1'>oldboy <a>google</a></div>
　　　　通过ID查找后使用innerText显示输出如下：
　　　　oldboy<a>google</a> 内容和包含的标签全部会打印

　　value:可以获取输入框输入的内容，也可以修改
　　　　(input value获取标签内值）
　　　　(select 获取选中的value值），特有的属性：selectedIndex，就是根据索引位置操作值
　　textarea value获取其中的值
　　checkbox
　　　　checkbox对象.checked 获取值
　　　　checkbox对象.checked = 赋值

搜索框的示例

<div style="900px;margin:0 auto;">
    <!-- onfocus光标移入到搜索框 onblur光标移出搜索框-->
    <input id = 'i1' onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />
</div>
<script>
    function Focus(){
        var tag = document.getElementById('i1')
        var val = tag.value
        if (val=='请输入关键字'){
            tag.value=''
        }
    }
    function Blur() {
        var tag = document.getElementById('i1')
        var val = tag.value
        if (val.length==0){
            tag.value='请输入关键字'
        }
    }
</script>

2：样式操作
<style>
　　.c1{....} # 先声明样式名
</style>
className # 通过dom实现css样式添加删除
　　tag.className = c1 直接整体做操作
classList
　　classList.add
　　　　tag.classList.add('c1') 添加指定样式
　　classList.remove
　　　　tag.classList.remove('c1') 删除指定样式

也可在对象上直接操作设置样式,但是要注意，样式的写法有一点区别，比如直接写style的参数：
background-color在这里写法是backgroundColor 都要去掉"-"符号，并且是驼峰写法。
<style>
　　.c1{....}
</style>
<div id = 'i1' class='c1 c2'></div>
obj = document.getElementById('i1')
obj.style.color = 'red' 可以直接设置样式
obj.style.fontZize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = 'red'

3：属性操作：操作标签内的某个属性
obj.setAttribute('键名','键值) --><input name='alex'> 添加
obj.removeAttribute('value') 删除
obj.attributes 获取所有属性

4：标签操作
创建标签，并添加到html中
1：以字符串形式
　　参数4个：
　　　　- beforeBegin # 标签外部的上面插入
　　　　- afterBegin # 标签外部的下面插入
　　　　- beforeEnd # 标签内部的上面插入
　　　　- afterEnd # 标签内部的下面插入
2：对象的方式（document.createElement('div'）)

举例如下：

<input type="button" onclick="AddEle1();" value="+">
<input type="button" onclick="AddEle2();" value="+">
<div id="i1">
<input type="text" />
</div>

<script>
    // 第一种方法以字符串：
    function AddEle1() {
        //创建一个标签，以字符串的方式
        //将标签添加到i1里
        var tag = '<p><input type="text" /></p>';
        //注意：第一个参数有4种：beforeBegin,afterBegin,beforeEnd,afterEnd,4个参数分别是在i1标签外部的
        // 上，下，标签内部标签的上，下插入
        document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
        //注意：这里通过insertAdjacentHTML添加的tag是字符串
    }
    //第二种方法以对象：
    function  AddEle2() {
        //创建标签，以对象方式
        var tag = document.createElement('input'); 创建标签
        tag.setAttribute('input','text');       创建属性
        tag.style.fontSize ='16px';     创建样式
        tag.style.color ='red';
        //创建p标签，并将tag添加进来
        var p = document.createElement('p')  创建标签
        p.appendChild(tag)      添加tag标签为p标签的子标签
        document.getElementById('i1').appendChild(p) 添加p标签到id=i1标签的下面
        //注意：这里通过appendChild添加的p是对象
    }
</script>

提交表单：
任何标签通过DOM都可提交表单

举例如下

<form id='f1' action="http://www.baidu.com">
<div onclick="submitForm();">提交</div>
</form>
<script>
    function submitForm() {
        document.getElementById('f1').submit() 找到id=f1后使用submit方法提交。
    }
</script>

其他：

console.log 终端控制台输出
alert 页面弹窗
confirm 页面弹出确认框（确定返回true,取消返回false）
var v = confirm('真的要删除么')
URL和刷新
location.href 获取当前的url
location.href = 'url' URL进行重定向
location.reload() 重新加载（页面刷新一下）

定时器
var obj = setInterval(function(){},毫秒) 设置定时器,一直执行
clearInterval(obj) 删除定时器
var obj = setTimeout(function(){},5000) 设置定时器并只执行一次
clearTimeout(obj) 删除定时器

举例：setTimeout定时执行

<div id="status"></div>
<input type="button" value="删除" onclick="deleteEle();" />
<script>
    function deleteEle() {
        document.getElementById('status').innerText = '已删除';
        setTimeout(function () {
            document.getElementById('status').innerText = ''
        },5000);
    }
</script>

举例：模态对话框和 复选框全选反选取消

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background-color:black;
            opacity:0.6;
            z-index:9;
        }
        .c2{
            width:500px;
            height:400px;
            background-color:white;
            position: fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-200px;
            z-index:10;
        }
    </style>
</head>
<body style="margin: 0;">
<input type="button" value="添加" onclick="showModel();" />
<input type="button" value="全选" onclick="chooseAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<table>
    <thead>
        <tr>
            <th>请选择</th>
            <th>主机名</th>
            <th>端口</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td><input type="checkbox" /></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>2.2.2.2</td>
            <td>22</td>
        </tr>
    </tbody>
</table>
<!--遮罩层开始-->
<div id='i1' class="c1 hide"></div>
<!--遮罩层结束-->

<!-- 弹出框开始 -->
<div id='i2' class="c2 hide">
    <p><input type="text" /> </p>
    <p><input type="text" /> </p>
    <p>
        <input type="button" value="确定" />
        <input type="button" value="取消" onclick="hideModel();" />
    </p>
</div>
<!-- 弹出框结束 -->
<script>
    function showModel() {
        document.getElementById('i1').classList.remove('hide');
        document.getElementById('i2').classList.remove('hide')
    }
    function hideModel() {
        document.getElementById('i1').classList.add('hide');
        document.getElementById('i2').classList.add('hide')
    }
    function chooseAll() {
        var tbody = document.getElementById('tb');
        // 获取所有的tr
        var tr_list = tbody.children;
        for(var i=0;i<tr_list.length;i++){
            //循环所有的tr
            var current_tr = tr_list[i];
            //第一个children是tr下所有的td ，第二个children是td下所有的input
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = true
        }
    }
    function cancleAll() {
        var tbody = document.getElementById('tb');
        var tr_list = tbody.children;
        for(var i=0;i<tr_list.length;i++){
            var current_tr = tr_list[i];
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = false;
        }
    }
    function reverseAll() {
        var tbody = document.getElementById('tb');
        var tr_list = tbody.children;
        for(var i=0;i<tr_list.length;i++){
            var current_tr = tr_list[i];
            var checkbox = current_tr.children[0].children[0];
            if(checkbox.checked == true){
                checkbox.checked = false;
            }else{
                checkbox.checked = true;
            }
        }

    }
</script>

举例：后台管理左侧菜单

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height:35px;
            background-color:blue;
            color: white;
            line-height:35px;
        }
    </style>
</head>
<body>
<div style="height:48px;"></div>
<div style=" 300px;">
    <div class="item">
        <div id='i1' class="header" onclick="changeMenu('i1');">菜单一</div>
        <div class="content hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>
    <div class="item">
        <div id='i2' class="header" onclick="changeMenu('i2');">菜单二</div>
        <div class="content hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>
    <div class="item">
        <div id='i3' class="header" onclick="changeMenu('i3');">菜单三</div>
        <div class="content hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>
</div>
<script>
    function changeMenu(nid) {
        var current_header = document.getElementById(nid);
        var item_list = current_header.parentElement.parentElement.children;
        for(var i=0;i<item_list.length;i++){
            var current_item = item_list[i]
            current_item.children[1].classList.add('hide');
        }
        current_header.nextElementSibling.classList.remove('hide');
    }
</script>

举例：循环给所有的a标签赋值

　　n1 = document.getElementsByTagName('a')
　　for (var i=0;i<n1.length;i++){
　　n1[i].innerText = 777
　　}

5：事件：
所有的事件如下：

以下为常用事件
　　onclick（单击） , onblur（光标移出）, onfocus（光标移入）,onmouseover(鼠标指向)，onmouseout（鼠标移出）
　　行为：js 　　 样式：css 　　 结构：html

绑定事件2个方式：
1：直接标签绑定 onclick='xxx()'
2：先获取dom对象，然后进行绑定：

　　document.getElementById('xx').onclick
　　document.getElementById('xx').onfocus
　　this：当前触发事件的标签，传入分2种方法：
　　1：第一种绑定方式以及this的使用,这里this就代表当前标签
　　　　<input type=button' onclick='checkon(this)'>
　　　　function checkon(ths){ ths 当前点击的标签}
　　2：第二种绑定方式
　　<input id='i1' type='button'>
　　document.getElementById('i1').onclick = function(){
　　this #这里的this待指当前点击的标签
　　}

典型的作用域示例：

<body>
    <table border="1">
        <tr><td>1</td><td>2</td></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>1</td><td>2</td></tr>
    </table>
    <script>
var myTrs = document.getElementsByTagName('tr'); #获取所有tr标签属组
var len = myTrs.length;  # 显示长度
for (var i=0;i<len;i++){  #循环每一行tr数据
    // i=0,1,2
    myTrs[i].onmouseover = function(){  #鼠标指向当前tr后执行函数设置背景色为red
        this.style.backgroundColor = 'red';  #鼠标指向哪个标签，这个this就代表当前指向的标签
        };
    myTrs[i].onmouseout = function(){  #鼠标指向当前tr后执行函数设置背景色为red
        this.style.backgroundColor = '';  #鼠标指向哪个标签，这个this就代表当前指向的标签
        };
    }
}
</script>

3：第三种绑定方式，可以实现2个onclick事件同时执行。
如下：

var mydiv = document.getElementById('test')
/*
mydiv.onclick = function () {
    console.log('abc')
}
mydiv.onclick = function(){
    console.log('456')
} 同时实现如上的2个onclick功能
*/
var mydiv = document.getElementById('test')
mydiv.addEventListener('click',function () {console.log('aaa'),false})
mydiv.addEventListener('click',function () {console.log('bbb'),false})
以上这个方式就实现了2个onclick的同时输出

捕捉和冒泡：

以下关于上面实例第三个参数true/false冒泡举例：

<div id="main">
    <div id="content"></div>
</div>
<script>
var mymain = document.getElementById('main')
var mycontent = document.getElementById('content')
mymain.addEventListener('click',function () {console.log('main'),false})
mycontent.addEventListener('click',function () {console.log('content'),false})
</script>
输出：当都为false时，输出为content , main 。当都为true时，输出为main,content

词法分析：
function t1(age){ 　　 　　 # 形参
　　console.log(age); 　　 #输出： function()
　　var age = 27;　　　　 # 局部变量
　　console.log(age); 　　 #输出： 27
　　function age(){} 　　 # 函数声明表达式,优先级高 ，这里执行时候没有调用
　　console.log(age); 　　#输出 27
　　}
t1(3);

以上实例分析过程：
active object ==> AO
1：形式参数
AO.age = undefined
AO.age = 3
2：局部变量，只发现有个var age变量，但不会赋值。
AO.age = undefained
3：函数声明表达式，优先级最高，会覆盖前2项出现的值
AO.age = function()