WEB_DOM操作

1.document.querySelector(); // 里面的参数可以存放元素标签和属性选择器如 document.querySelector('.box')

　　ondbclick (双击)

<body>
    <div class="box">
        <p>我是一个p标签</p>
    </div>
</body>
<script>
    var p1 = document.querySelector('p');
    var parent1 = p1.parentNode.parentNode; // parentNode是他的父节点
    console.log(parent1);

    var oHtml = document.documentElement;    // documentElement是html节点   document是HTML文档
    console.log(oHtml.parentNode);
    console.log(document.parentNode);
    console.log(oHtml.parentElement)
</script>

2.元素.childNodes 是一个类数组，包括换行也算是一个节点

　　// 孩子节点包括元素节点1 属性节点2 文本节点3 注释节点8

　　// firstChild所有儿子的第一个 / lastChild是所有儿子的最后一个 firstElementChild 直接是第一个元素节点

3.Sibling

　　// 元素.nextSibling 是下一个兄弟，但是包括元素和文本节点

　　// 元素.nextElementSibling 直接得到下一个兄弟元素节点

　　// 元素.previousSibling 上一个兄弟，但是包括元素和文本节点

　　// 元素.previousElementSibling 直接得到上一个兄弟元素节点

4.createElement（创建一个元素节点）

createTextNode （创建一个文本节点=【有时间可以把css样式写入】）

　　　元素.insertBefore(老元素, 新加元素); 在兄弟元素之前添加（有的IE老版本不支持）

　　　元素.appendChild(新加元素);

　　　添加批量元素推荐使用：innerTHML添加或者用数组添加如下代码：

　　第一种是 innerHTML添加

　　// btn.onclick = function(){

// var lis = document.createElement('li');

// lis.innerHTML = "我是js生成的"+i;

// i++;

// // oUl.appendChild(lis);

// // 在元素之前添加

// oUl.insertBefore(lis, oUl.children[0]);

// }

　　第二种 arr数组添加

　　var arr = [];

for(var i=0; i<1000; i++){ // 2

arr.push('<li>动态生成</li>');

}

oUl.innerHTML = arr.join(""); // 此时的join是数组转换成字符串

5.clone （克隆）

　　代码如下：

　　var firstCopy = ul.children[0].cloneNode(true); // cloneNode(true) 是深度克隆，为空或者false为浅层复制

　　　　 ul.appendChild(firstCopy);

6.removeChild() （删除元素）

　　　值为被删除的元素节点

　　　参考代码如下：

　　　oUl.removeChild(被删除的元素节点);

　　　元素.disable = true; // 禁用按钮

7.event

　　　addEventListener // DOM2 的事件监听

　　// 事件监听兼容性解决

　　// function addEventListener(ele, eventName, fn){

　　// if(ele.addEventListener){

　　 // ele.addEventListener(eventName, fn);

　　// }else if(ele.attachEvent){

　　// ele.attachEvent('on'+eventName, fn);

　　// }else{

　　// ele['on'+eventName] = fn;

　　// }

　　// 事件监听兼容性解决删除事件监听

　　 // function removeEventListener(ele, eventName, fn){

　　 // if(ele.removeEventListener){

　　 // ele.removeEventListener(eventName, fn);

　　// }else if(ele.detachEvent){

　　 // ele.detachEvent('on'+eventName, fn);

　　 // }else{

　　// ele['on'+eventName] = null;

　　 // }

8.eventObject

事件对象--跟事件相关的一系列数据

事件对象中主要属性和方法

target 目标元素触发事件的对象

srcElement ------IE678浏览器使用，不是标准

type------事件类型不带on

cancelBubble-------阻止冒泡 IE678使用属性

returnValue----------------阻止冒泡，标准属性 IE678使用属性兼容问题大

preventDefault----------阻止事件默认行为

stopPropagation------------阻止冒泡

return false; // 只能咋DOM0级使用

9.event_父亲代理的方法

　　给父亲绑定事件，通过事件冒泡的原理，实现子元素使用父亲的事件方法

10.mouseevent

　　// onclick onmouseover/onmouseout onmouseenter/mouseleave

// onfocus/onblur onmousemove/onmouseup onmousedown

onmouseover 鼠标经过自身盒子触发，经过子盒子也会触发原因是onmouseover会冒泡

onmouseenter 鼠标经过自身盒子触发，经过子盒子不会触发鼠标移动子元素会触发，经过父不会触发 onmouseenter　　　　不会冒泡

　　// 元素.onfocus 获取焦点

　　// 元素.onblur 失去焦点

　　// 元素.oninput 获取input文本框种的信息

　　// 右键禁止菜单

p1.addEventListener('contextmenu', function(e){

e = e || event;

e.preventDefault();

})

// 不允许选择

p1.addEventListener('selectstart',function(e){

e.preventDefault();

})

// 禁止整个文档右键

document.addEventListener('contextmenu', function(e){

e.preventDefault();

})

11.keyEvent

　onkeyup 识别功能键 ctrl、shift

onkeydown 不能识别功能键回车可以识别

onkeypress 可以区分大小写

键盘事件对象的keyCode 表示该键的ASCII值,再onkeyup / onkeydown中对应的事件处理

函数中字母不区分大小写

12.event_position

clientX: clientY 可视区域的X,Y轴的坐标

pageX: pageY 页面文档的x和y坐标

screenX screenY 显示器的屏幕X,Y

13.div跟随鼠标运动

// document.addEventListener('mousemove', function(e){
    //     var left = e.clientX;
    //     var top = e.clientY;
    //     document.querySelector('.box').style.left = left + 'px';
    //     document.querySelector('.box').style.top = top + 'px';
    // })

    // 在有滚动条的情况下解决div块和鼠标不在一起的问题
    //方法1
    /*
        被滚动条卷入的都是scrolltop 和 scrollleft的 高和宽

        给body加高和加宽分浏览器:
            火狐和ie 认识 document.documentElement.scrollTop
            chrome 认识 
    var st = document.documentElement.scrollTop || document.scrollTop;
    var sl = document.documentElement.scrollLeft || document.scrollLeft;
    document.addEventListener('mousemove', function(e){
        var left = e.clientX;
        var top = e.clientY;
        document.querySelector('.box').style.left = left + sl + 'px';
        document.querySelector('.box').style.top = top + st + 'px';
    })
    */

    // 方法2
    document.addEventListener('mousemove', function(e){
        var left = e.pageX;
        var top = e.pageY;
        document.querySelector('.box').style.left = left + 'px';
        document.querySelector('.box').style.top = top + 'px';
    })

14.属性节点

　　getAttribute 获取属性节点

　　setAttribute 设置属性节点也可以设置自定义属性节点

　　removeAttribute　　删除属性节点

15.table栏目切换练习

<body>
    <div class="box">
        <div class="tab_menu">
            <ul>
                <li class="current">游戏鼠标</li>
                <li>游戏键盘</li>
                <li>游戏耳机</li>
            </ul>
        </div>
        <div class="tab_content">
            <div class="item current">游戏鼠标</div>
            <div class="item">游戏键盘</div>
            <div class="item">游戏耳机</div>
        </div>
    </div>
    
</body>
<script>
    var tab_menu = document.querySelector('.tab_menu');
    var lis = tab_menu.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    for(var i=0; i<lis.length; i++){
        lis[i].setAttribute('idx', i);
        lis[i].onclick = function(){
            for(var j=0; j<lis.length; j++){ // 用到了排他法
                lis[j].className = "";
                items[j].style.display = "none"
            }
            this.className = 'current';
            
            idx = this.getAttribute("idx");
            items[idx].style.display = "block";
        }
        
    }
</script>

16.

posted @ 2020-05-22 15:04 艺术就是派大星_s 阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

艺术就是派大星_s

WEB_DOM操作

公告