JS重点知识:DOM操作

  

 

                                               

获取节点

                          

注意: 

a标签有点特殊,要加上javascript:void(0),表示,不执行跳转而去执行点击事件

            <a href="javascript:void(0)" >伪协议</a>             
            <a href="javascript:void(0)" οnclick="console.log('haha')">伪协议</a>  //不加看不出来haha,会立刻跳走
            <a href="javascript:void(0)" οnclick="getById()">伪协议</a>             //调用函数
            <a href="javascript:getById()" >伪协议</a> //这是另外一种写法,javascript:void(0)表示不执行,这样写就表示执行这个方法

创建操作节点

                表单元素
                    文本框text、密码框password、文本域textarea、下拉框select、radio单选框、复选框checkbox、隐藏域hidden
                    获取值：
                        dom对象.value;
                    设置值：
                        dom对象.value = "xxx";
                    
                非表单元素
                    div、span、p、h1~h6、a、td、li等
                    获取值：
                        dom对象.innerHTML;
                    设置值：
                        dom对象.innerHTML = "xxx";
                        
            创建节点
                创建元素节点
                    document.createElement("标签名");
                创建文本节点
                    document.createTextNode("文本内容");
                设置属性
                    dom对象.属性名 = "xxx";
                获取属性
                    dom对象.属性名;
                    
            插入节点,注意是节点!!!有哪些节点可以看上面的表格
                appendChild();
                    在指定元素的最后追加子节点
                    语法：
                    dom元素.appendChild(子元素);

插入节点

              write()
                向文档中插入任意字符串
            insertBefore()
                向指定元素的前面插入元素（同级元素）
                参数一：新的要插入的节点
                参数二：参考节点,就是像谁的前面插入一个节点
                注：需要通过参考节点的父节点
                
                参考节点的父节点.insertBefore(要插入的节点,参考节点);

间接查找节点   

                  方法|属性            描述
                childNodes        返回元素的一个子节点的数组
                firstChild        返回元素的第一个子节点
                lastChild        返回元素的最后一个子节点
                nextSibling        返回元素的下一个兄弟节点
                parentNode        返回元素的父节点
                parentElement    返回元素的父元素
                previousSibling    返回元素的上一个兄弟节点

替换节点

                方法|属性                            描述
                replaceChild(newNode,oldNode)    用新的节点替换旧的节点
                oldNode.parentNode.replaceChild(newNode,oldNode)
                首先通过旧节点定位到父节点，然后用新的节点替换旧节点

克隆节点

                方法|属性            描述
                cloneNode()        复制节点
                var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
                true：深度克隆，可以克隆结构和内容
                false(默认值)：只克隆结构

删除节点

                方法|属性            描述
                removeChild()    从元素中移除子节点
                
                注：javascript:void(0)表示伪协议，即不做跳转操作，去执行点击操作