js DOM

作者: lucky_yao | 来源:发表于2020-09-28 08:13 被阅读0次

    1:什么是dom对象?

    dom对象就是html页面,dom对象的全称叫document object model(文档对象模型)

    2:dom对象的作用是什么呢?

    dom对象就是通过一些方法和属性来操作标签,

    这么操作标签?

    将标签元素进行添加、移动、改变或移除

    3:标签==标记==元素==节点

    4: dom节点的分类?

    dom节点分为3种类型

    1:标签节点

    2:文本节点

    属于标签下面的子节点

    3:属性节点

    5:返回节点类型值

    nodeName    该节点的名字,和tagName方法一样
    
    nodeValue 该节点的文本
    
    nodeType  该节点的编码    标签节点返回数字1,属性节点返回数字2,文本节点返回数字3
    

    6:查找子节点

    childNodes[0]   返回当前元素节点的所有子节点
    
    firstChild 获取该节点的第一个子节点
    
    lastChild 获取该节点的最后一个子节点
    
    parentNode  获取该节点的父节点
    
    previousSibling 获取该节点的前一个节点
    
    nextSibling 获取该节点的下一个节点
    
    children[0] 获取该节点的子标签节点
    
    firstElementChild 第一个子标签属性
    
    lastElementChild 最后一个子标签属性
    
    nextElementSibling 下一个兄弟元素节点
    
    previousElementSibling 前一个兄弟元素节点
    
    childElementCount 子元素节点个数量
    

    7:查找属性节点

    attributes  属性
    

    8:操作属性节点

    document.getAttribute()//获取特定元素节点属性的值/通过属性获取到对应的属性值
    
    document.setAttribute(要设置的属性,属性值)//设置特定元素节点属性的值/通过属性设置对应的属性值
    
    document.removeAttribute()//移除特定元素节点属性的值
    

    9:操作节点

    createElement()//创建标签
    
    createTextNode()//创建文本
    
    appendChild(创建的标签名,当前的标签名)//把标签或者文本插入/添加到另一个节点里面  不加引号
    
    insertBefore()//在当前节点前面创建一个节点
    
    用insertBefore方法创建节点必须先找到当前节点的父节点后,在创建  方法里面不加引号
    
    replaceChild(新节点,旧节点)//把节点替换成指定的节点
    
    cloneNode(false/true)//克隆/复制节点    true克隆的是标签+文本      如果是false 只会克隆标签
    
    removeChild()//删除节点
    

    10:移入移出事件

    onmousemove  移入事件
    
    onmouseout  移出事件
    
    onmouseover 移入事件
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 200px;
                    background: black;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
        <script type="text/javascript">
            var oDiv=document.getElementsByTagName('div')[0];
            var turr=true;
             oDiv.onmouseover=function(){
                this.style.background='red'
            }//移入事件
            oDiv.onmouseout=function(){
                this.style.background='green'
            } //移出事件
            /* oDiv.onmousemove=function(){
                if(turr==true){
                    this.style.background='red';
                    turr=false;
                }else{
                    this.style.background='green';
                    turr=true;
                }
            }//移入移出事件 */
        </script>
    </html>
    

    相关文章

      网友评论

          本文标题:js DOM

          本文链接:https://www.haomeiwen.com/subject/htbhyktx.html