js-dom

1. dom 文本对象模型 html 或xml 的编程接口
2. dom树 ：

• 文档： 一个页面就是一个文档 document
• 元素 所有的元素
• 节点 网页的所有内容都是 标签属性文本注释等

3. 获取页面元素

• 通过 id： 返回文档对象

document.getElementById(‘id’)

<div id="x1"></div>
<script>
    var x1 = document.getElementById('x1')
    console.log(x1)

    console.log(typeof x1)//打印返回的类型
    console.dir(x1)//打印对象里面的属性和方法
</script>

• 通过标签名 返回对象集合

document.getElementsByTagName(“li”)

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var x2 = document.getElementsByTagName("li")
    console.log(x2)
    console.log(x2[0])
    console.log(typeof x2)//打印返回的类型
    console.dir(x2)//打印对象里面的属性和方法
</script>

通过html5新增方法（ie789才支持建议no)

• 通过类名：返回集合

document.getElementsByClassName(‘类名’)

• 通过选择器（.#）：
  返回指定选择器的第一个元素对象

document.querySelector(’.box’)
返回指定所有选择器元素对象
document.querySelectorAll(’.box’)

• 获取特定对象
  body html

document.body;
document.documentElement;

4. 事件：

三要素

• 事件源

• 事件类型

• 事件处理程序

<button id="bt1">bt1</button>
<script>
    //获取事件源
    var bt1 = document.getElementById('bt1')
    //事件类型 如何触发 什么事件 
    // bt1.onclick 绑定事件
    //事件处理程序 函数赋值完成
    bt1.onclick = function (){
        alert('bt1')
    }
</script>

常见鼠标事件

鼠标事件	触发条件
onclick	点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

• 改变元素内容

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
保留html 标签空格 换行
2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
不识别HTML标签 去除空格和换行
4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

<button id="bt1">bt1</button>
<div id="div1">

</div>
<p></p>
<script>
    //获取事件源
    var bt1 = document.getElementById('bt1')
    var div1 = document.getElementById('div1')
    //事件类型 如何触发 什么事件
    //事件处理程序 函数赋值完成
    bt1.onclick = function (){
        div1.innerText = 'sss'
        //div1.innerHTML = 'ddd'
    }
    //元素不需要添加事件
    var p = document.querySelector('p')
    p.innerText = 'xx';
</script>

• 改变元素属性

<button id="bt2">bt2</button>
<img src="../xiaohei2.png" alt="xx">
<script>
    //获取事件源
    //修改元素属性
    var bt2 = document.getElementById('bt2')
    var img = document.querySelector('img')
    bt2.onclick = function (){
        img.src = '../love.png'
    }
</script>

• 修改表单属性

可修改值 value type checked selected disable

<button id="bt3">bt3</button>
<input type="text" name="xx" id="text1">
<script>
    var bt3 = document.getElementById('bt3')
    var text1 = document.getElementById('text1')
    bt3.onclick = function (){
        text1.value = 'xxxx'
    }
</script>

• 修改元素样式

1.element.style 产生的是行内样式 权重高
2.element.className

 <style>
        .div2 {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        .div2change {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
</style>
<script>
        var div2 = document.getElementById('div2')
    div2.onclick = function (){
        //this 指向函数的调用者
        //或者div2.style
        //this.style.backgroundColor = 'pink'
        //或
        this.className = 'div2change'
    }
</script>

密码框验证提示信息

<style>
        .register {
            width: 600px;
            margin: 100px auto;
        }
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999999;
            padding-left: 20px;
        }
        .err {
            color: red;
        }
        .right {
            color: green;
        }
    </style>
    <div class="register">
    <input type="password"  id="password" class="pw">
    <p class="message">请输入6-16位密码</p>
</div>
<script>
    //1.判断表单失去焦点
    var pw = document.getElementById('password')
    var message = document.querySelector('.message')
    pw.onblur = function () {
        if(this.value.length < 6 || this.value.length > 16){
            message.className = 'err'
            message.innerHTML = '您输入位数要求6-16位不对'
        }else {
            message.className = 'right'
            message.innerHTML = '正确输入'
        }
    }
</script>

5. 自定义属性：

• element.属性获取的是自定义属性
• element.getAttribute(’’)获取的是自定义属性

<div index="xxx">
    
</div>

<script>
    var div_index = document.querySelector('div')
    index = div_index.getAttribute('index')
    console.log(index)
</script>

• 设置自定义属性值

• element.属性=‘值’ 内置属性
• element.setAttribute(‘属性’，‘值’)
• 特殊 修改类
  element.setAttribute(‘class’,‘className’

)

<script>
    var div_index = document.querySelector('div')
    set = div_index.setAttribute('inde','2')
</script>

• 移除 removeAttribute(’’)
• tab栏制作

<head>
    <meta charset="UTF-8">
    <title>tab制作</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab {
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }
        .tab_list {
            border: 1px solid red;
        }

        .tab_list ul li {
            display: inline-block;
        }
        .item {

            display: none;
        }
        .current {
            background-color: #2aabd2;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价(500)</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block">商品介绍模块</div>
        <div class="item">规格与包装模块</div>
        <div class="item">售后保障模块</div>
        <div class="item">商品评价)模块</div>
        <div class="item">手机社区模块</div>
    </div>
</div>
<script>
    var tab_list = document.querySelector('.tab_list')
    var list = tab_list.querySelectorAll('li')
    var items = document.querySelectorAll('.item')
    for (var i = 0; i< list.length;i++){
        list[i].setAttribute('index',i);
        list[i].onclick = function () {
            for (var i = 0;i< list.length;i++){
                list[i].className = '';
                items[i].style.display = 'none';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            items[index].style.display = 'block'

        }
    }
</script>

• 命名规范 用data-xxx H5规范ie11
• 获取 element.dataset.xxx或element.dataset[‘xxx’]
• 驼峰命名 如 data-list-name获取 element.dataset[‘listName’]

6. 利用节点关系获取元素

• 节点：

• 元素节点 nodeType = 1
• 属性节点 nodeType = 2
• 文本节点 nodeType = 3

• 父节点 parent.Node 离元素最近的父节点 找不到返回 null
• 字节点同理 childNodes 字节点集合 包含文本节点…
• 用parent.children 只读属性 返回所有子元素节点

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var child = document.querySelector('.child')
    console.log(child.parentNode)
    var ul = document.querySelector('ul')
    console.log(ul.childNodes)
    console.log(ul.childNodes[0].nodeType)
    console.log(ul.children)

</script>

• 字节点

<script>
    var ul = document.querySelector('ul')
    console.log(ul.firstChild)//第一个字节点 不管是文本节点还是元素节点
    console.log(ul.lastChild)
    console.log(ul.firstElementChild)//ie10 元素节点
    //实际开发写法
    console.log(ul.children[0])
</script>

新浪下拉框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000000;
            padding: 0 10px;
        }
        a:hover {
            color: #FF8400;
        }
        .nav {
            text-align: center;
            height: 41px;
            border: 1px solid #FCFCFC;
        }
        .nav ul {
            line-height: 41px;
        }
        .nav ul li {
            display: inline-block;
        }
        .nav ul li a:hover {
            color: #FF8400;
        }
        .nav ul li:hover {
            background-color: #eeeeee;
        }
        .topmenulist {
            position: absolute;
            display: none;
        }
        .topmenulist ul li {
            display: block;
            border: 1px solid #fecc5b;
            border-top: none;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul class="ul">
        <li>
            <a href="#">微博</a>
            <div class="topmenulist">
                <ul>
                    <li><a>私信</a></li>
                    <li><a>评论</a></li>
                    <li><a>@我</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">微博</a>
            <div class="topmenulist">
                <ul>
                    <li><a>私信</a></li>
                    <li><a>评论</a></li>
                    <li><a>@我</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">微博</a>
            <div class="topmenulist">
                <ul>
                    <li><a>私信</a></li>
                    <li><a>评论</a></li>
                    <li><a>@我</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>
<script>
    var ul = document.querySelector('.ul');
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
        lis[i].onmouseover = function (){
            console.log(this.children[1])
            this.children[1].style.display = 'block'
        }
        lis[i].onmouseout= function (){
            this.children[1].style.display = 'none'
        }
    }
</script>

• 兄弟节点

• node.nextSibling 包含元素节点 文本节点等
• node.previousSibling 同理
• node.nextElementSibling 获取的是兄弟元素节点 ie9
• node.previousSibling 同理 ie9

• 解决办法：封装兼容性函数

<script>
function getNextElementSibling(element){
        var el = element;
        while (el = el.nextSibling){
            if(el.nodeType == 1){
                return el;
            }
        }
        return null;
    }
</script>

<div>大哥</div>
<span>小弟</span>
<script>
    var dage = document.querySelector('div')
    console.log(dage.nextSibling)
    console.log(dage.previousSibling)
    console.log(dage.nextElementSibling)
    console.log(dage.previousSibling)
</script>

• 创建节点

<ul>
	<li>1</li>
</ul>
<script>
    var li = document.createElement('li')
    var ul = document.querySelector('ul')
    ul.appendChild(li)//子元素后面
    var lili = document.createElement('li')
    ul.insertBefore(lili,ul.children[0]) 
    //指定位置
</script>

-删除复制节点

<button>删除</button>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>

    var ul = document.querySelector('ul')
    var btn = document.querySelector('button')
    btn.onclick = function (){
        ul.removeChild(ul.children[0])
        //删除一个节点
    }

    var liClone = ul.children[0].cloneNode(true);//
    //() （false）浅拷贝 不复制内容 true 复制
    ul.appendChild(liClone)
</script>

留言案例：

<head>
    <meta charset="UTF-8">
    <title>留言案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            margin: 0 auto;
            text-align: center;
        }
        #liuYan {
            width: 300px;
            height: 100px;
        }
        ul {
            width: 300px;
            margin: 0 auto;
        }
        ul li {
            list-style: none;
            background-color: #999999;
            text-align: left;
            text-indent: 1em;
            width: 300px;
            margin: 10px 0;
        }
        ul li a {
            text-decoration: none;
            float: right;
        }
    </style>
</head>
<body>
<div>
   <textarea id="liuYan"></textarea>
    <br>
    <button>发布</button>
    <br>
    <ul>
    </ul>
</div>
<script>
    function deleteLiuYan(element,ul) {
        ul.removeChild(element);
    }
    var btn = document.querySelector('button');
    var textarea = document.getElementById('liuYan');
    var ul = document.querySelector('ul');
    btn.onclick = function () {
        if(textarea.value==''){
            alert('请输入内容');
        }else {
            var li = document.createElement('li')
            li.innerHTML = textarea.value+"<a href='javascript:;' οnclick='deleteLiuYan(this.parentNode,ul)'>删除</a>";
            ul.appendChild(li)
           // ul.insertBefore(li,ul.children[0])
        }
    }
</script>

动态生成表格

<head>
    <meta charset="UTF-8">
    <title>动态生成表格</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,th {
            border: 1px solid #333;
        }
        thead tr {
            height: 40px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    //模拟数据
    var datas =[
    {
        name:'小于',
        subject:'java',
        score:'88',
    },
    {
        name:'小张',
        subject:'java',
        score:'88',
    }];
    function deleteLiuYan(element,tbody) {
        tbody.removeChild(element);
    }
    var tbody = document.querySelector('tbody');
    for(var i=0;i<datas.length;i++){
       var tr = document.createElement('tr');
       tbody.appendChild(tr);
       for(var j in datas[i]){
           var td = document.createElement('td');
           td.innerHTML = datas[i][j];
           tr.appendChild(td)
       }
       var deleteBtn = document.createElement('td');
       deleteBtn.innerHTML="<a href='javascript:;' οnclick='deleteLiuYan(this.parentNode.parentNode,tbody)'>删除</a>";
       tr.appendChild(deleteBtn);
    }
</script>

• 3个生成区别
• document.write():直接将内容写入页面内容流，但是文档执行完毕，再调用这句会导致页面重绘
• innerHTML = ’ ’ : 将内容写入某个节点 尽量不要拼接字符串 采取数组形式拼接
• createElement 创建多个元素效率较低 但结构清晰。