JS笔记（二） DOM部分

DOM

DOM定义了表示和修改文档所需的方法。dom对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合（但不能操作CSS样式表，但是可以通过操作html改变行间样式来间接改变）。也有人称DOM是对HTML以及XML的标准编程接口

DOM基本操作

对节点的增删改查

查

查看元素节点

把对象放在一个类数组里 不能使用push方法

document代表整个文档

• document.getElementById()//元素id在ie8以下的浏览器，不区分id大小写，而且也返回匹配class的名字为name属性的元素（不要太依赖id选择器）

  • 在实际开发中，每个员工会拿到一个<section></section>，要在里边写自己的id = “”,来区别，会在后边作为后端php,jsp的一个抽取接口，根据id名来把section抽取掉，最后会换id名，换成它想要的，代码整合 （自己运行的时候好使，连接前后端调试时会出错）

• .getElementsByTagName()//标签名 最主流的用法

  • 里面可以写* var div = document.getElementsByTagName('*')[0]; 可以选择所有标签

• getElementsByName()//需注意，以前版本的浏览器只有部分标签name可生效（表单、表单元素、img、iframe） 指数据名

• .getElementsByClassName()//类名->ie8和ie8以下的ie版本中没有，可以多个class一起（因为兼容性问题，所以使用比较少）

• .querySelector()//css选择器 在ie7和ie7以下的版本中没有（基本不用）（缺点：实时性问题，选出来的元素不是实时的，第一次选出来了 之后的都是第一次的结果）

  • <div>
        <strong></strong>
    </div>
    <div>
        <span>
        	<strong class = "demo">123</strong>
        </span>
    </div>
    <script>
    	var strong = document.querySelector('div > span strong.demo')
    </script>
    

  • 选的是一个对象、如果不是在该方法生成的东西上更改，该静态写照不会更改

• .querySelectorAll() //css选择器 在ie7和ie7以下的版本中没有（基本不用）（缺点：实时性问题，选出来的元素不是实时的）

  • 选的是一组，会放在类数组里

所有的div被封装在类数组里并排序 dom对象

var div = document.getElementsByTagName('div')[0];//拿第一个div

改(插入)

小驼峰代替属性名的-

div.style.width = '100px';
div.style.height = '100px';
div.tyle.backgroundColor = 'red';

• PARENTNODE.appendChild(); 【常用】

  • var div = document.getElementsByTagName('div')[0];
    var text = document.createTextNode('海');
    var span = document.createElement('span');
    div.appendChild(text);
    div.appendChild(span);  
    var text1 = document.createTextNode('demo');
    span.appendChild(text1);
    span.appendChild(text);//原来的位置没了，到span里了
    

  • 是一种剪切操作

• PARENTNODE.insertBefore(a,b);【常用】

  • insert a before b
  • 在parentnode里的b之前插入a

为标签添加事件：

div.onclick = function () {
   
    this.style.backgroundColor = 'green';
}
//改进 反复点击
var count = 0;
div.onclick = function () {
   
    count ++;
    if(count % 2 == 1) {
   
        this.style.backgroundColor = 'green';
    }else{
   
        this.style.backgroundColor = 'red';
    }
}

点击三个按钮事件(选项卡)

<style>
    .wrapper div{
    
        width: 100px;
        height: 100px;
        border: 2px solid black;
        display: none;
    }
    .active {
    
        background-color: yellow;
    }
</style>
<div class="wrapper">
    <button class="active">111</button>
    <button>222</button>
    <button>333</button>
    <div class="content" style="display: block;" >小海</div>
    <div class="content">小小海</div>
    <div class="content">小小小海</div>
</div>
<script>
    var btn = document.getElementsByTagName('button');
    var div = document.getElementsByClassName('content');

    for(var i = 0; i < btn.length; i++) {
    
        (function(n){
    
            btn[n].onclick = function() {
    

                for(var j = 0; j < btn.length; j ++) {
    
                    btn[j].className = "";
                    div[j].style.display = "none";
                }
                this.className = "active";
                div[n].style.display = "block";
            }
        }(i))
    }
</script>

增

• document.createElement(); 增加一个元素节点【常用】
  • 创建div标签 JavaScript拿着,还没有放在页面里
  • document.body.appendChild(div);
• document.createTextNode();增加文本节点
• document.createComment();
• document.createDocumentFragment();

增加一个div，移动并控制它

<button style = "width:100px;height:50px;background:linear-gradient(to left, #999, #000, #432, #fcc);"position: fixed; right:0;top: 50%;>加速</button>

var btn = document.getElementByTagName('button')[0];
var div = document.createElement('div');
document.body.appendChild(div);
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'red';
div.style.position = 'absolute';
div.style.left = '0';
div.style.top = '0';
var speed = 1;

var timer = setInterval(function () {
   
    speed += speed/10;
    div.style.left = parseInt(div.style.left) + speed + 'px';
    div.style.top = parseInt(div.style.top) + speed + 'px';
    if(parseInt(div.style.top) > 200 && parseInt(div.style.left) > 200){
   
        clearInterval(timer);//清除定时器
    }
}, 100);//定时器 每隔100ms执行该函数

var time = new Date().getTime();//得到时间片
var aa = 5;
//计数器计数 加加/减减/归零
btn.onclick = function () {
   
    aa ++;
}
//绑定小事件 会传递一个事件对象进来，包含了所有事件信息 可以监听键盘
document.onkeydown = function(e) {
   
    switch(e.case) {
   
        case 38:
            div.style.top = parseInt(div.style.top) - aa +'px';
            break;
        case 37:
            div.style.left = parseInt(div.style.left) - aa + 'px';
            break;
        case 39:
            div.style.left = parseInt(div.style.left) + aa + 'px';
            break;
        case 40:
            div.style.top = parseInt(div.style.top) + aa + 'px';
    }
    new Date.getTime()-time;
}

格子上画画

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
    
            margin : 0;
            padding : 0;
        }
        li {
    
            float: left;
            width: 20px;
            height: 20px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        ul {
    
            list-style: none;
            width: 200px;
            height: 200px;

        }
    </style>
</head>
<body>
    <ul>
        <li img-date = '0'></li>
        </!--一百个>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        ul.onmouseover = function(e) {
    
            var event = e || window.event;//找事件对象 兼容性
            var target = event.target || event.srcElement;  //找事件元对象 target 就是li
            target.style.backgroundColor = 'rgb(0, 255,' + target.getAttribute('img-date') +')';
            target.setAttribute('img-date',parseInt(target.getAttribute('img-date')) + 15);
        }
    </script>
</body>
</html>

删

• parent.removeChild();【常用】
  • 父节点删除子节点（谋杀
  • var ii = div.removeChild(i); —>i里保存的是移除的标签
• child.remove();【常用】
  • 自己删除自己（自杀
  • 不会有标签保存移除的标签 es5新方法，是真正的销毁

替换

• parent.replaceChild(new,orgin);
  • 拿新的元素替换老的元素

遍历树

<div>
    <strong>