JavaScript基礎之DOM Elements對象與Attributes對象

DOM Elements對象 

//Elements對象
        //屬性
                //節點
        array   element.attributes;             //返回該元素的全部屬性節點組成的數組
        array   element.childNodes;             //返回該元素直接子節點組成的數組(包括文本節點和註釋節點)
        array   element.children;               //返回該元素直接子元素節點組成的數組(不包括文本節點和註釋節點)
        int     element.childElementCount();    //返回該元素直接子元素節點數量(不包括文本節點和註釋節點)     
                //節點遍歷
        node    element.firstChild;             //返回元素的第一個子節點(可能爲元素節點、文本節點、註釋節點)
        node    element.lastChild;              //返回元素的最後一個子節點(可能爲元素節點、文本節點、註釋節點)
        node    element.previousSibling;        //返回元素緊接的前一個字節(可能爲元素節點、文本節點、註釋節點)
        node    element.nextSibling;            //返回元素緊跟的一個節點(可能爲元素節點、文本節點、註釋節點)
        node    element.parentNode;             //返回元素的父節點
        node    element.ownerDocument;          //返回元素的根節點(#document)
        int     element.length;                 //返回節點集合的數目
                //元素遍歷
        element element.firstElementChild;      //返回元素的第一個元素子節點
        element element.lastElementChild;       //返回元素的最後一個元素子節點
        element element.previousElementSibling; //返回元素緊接的前一個元素
        element element.nextElementSibling;     //返回元素緊跟的一個元素節點
        element element.parentElement;          //返回元素的父元素
                //節點屬性
        string  element.nodeName;               //返回節點名(大寫) 
        int     element.nodeType;               //返回節點類型 1元素節點 2屬性節點 3文本節點 8註釋節點
        string  element.nodeValue;              //返回節點值 element.childNodes[0].nodeValue返回文本
                //元素屬性
        string  element.id;                     //設置或返回元素的id屬性
        string  element.className;              //設置或返回元素的類名屬性
        string  element.tagName;                //返回元素的標籤名(大寫)
        string  element.lang;                   //設置或返回元素的lang屬性
        string  element.title;                  //設置或返回元素的title
        string  element.dir;                    //設置或返回元素的文本方向 默認ltr左到右 rtl右到左 auto基於瀏覽器
        string  element.style;                  //設置或返回一個樣式屬性
        void    element.accessKey;              //設置訪問該元素的快捷鍵 使用Alt+accessKey
        int     element.tabIndex;               //設置或返回單選按鈕的tab鍵控制次序 從1開始
        string  element.innerHTML;              //設置或返回元素的內容
        string  element.textContent;            //返回或設置元素的文本內容 返回全部後代的文本 設置會替換全部後代
        bool    element.contentEditable;        //設置元素是否可被編輯
        bool    element.isContentEditable;      //返回元素是否可編輯 true表示可編輯
                //元素大小和位置控制
        int     element.clientHeight;           //返回包含滾動條元素的顯示區域高度(height + padding)
        int     element.clientWidth;            //返回包含滾動條元素的顯示區域寬度(width + padding)
        int     element.clientLeft;             //返回元素左邊框的寬度
        int     element.clientTop;              //返回元素上邊框的寬度

        int     element.scrollHeight;           //返回包含滾動條元素的完整高度(height + padding)
        int     element.scrollWidth;            //返回包含滾動條元素的完整寬度(width + padding)
        int     element.scrollLeft;             //返回元素滾動條橫向滾動的距離
        int     element.scrollTop;              //返回元素滾動條豎向滾動的距離

        int     element.offsetHeight;           //返回元素的高度(height + padding + border + scrollbar)
        int     element.offsetWidth;            //返回元素的寬度(width + padding + border + scrollbar)
        int     element.offsetLeft;             //返回元素左外邊框到定位父元素左外邊框的距離
        int     element.offsetTop;              //返回元素上外邊框到定位父元素上外邊框的距離
        element element.offsetParent;           //返回元素的偏移容器
                //類屬性控制
                //DOMTokenList對象
                //屬性length指定類的數量 
                //方法add(class1, class2, ...); 向元素添加一個或多個類名 若是指定的類名存在則不添加
                //方法contains(class);          檢查指定的類名是否存在
                //方法item(index);              返回類名在元素中的索引值
                //方法remove(class1,class2,...);移除一個或多個類名 移除不存在的類名不會報錯
                //方法toggle(class,[true|false])在元素中切換類名 第二個參數爲true時表示強制添加或移除
        object  element.classList;              //返回元素的一個DOMTokenList對象

        //方法
        void    element.addEventListener(event, function, bool);    //爲元素添加事件監聽
        void    element.removeEventListener(event, function, bool); //移除元素的事件監聽
        element element.getElementsByTagName(tagname);              //獲得元素下標籤名爲tagname的元素集合
        element element.getElementsByClassName(classname);          //獲得元素下類名爲classname的元素集合
        element element.querySelector(CSS);                         //返回CSS選擇器指定的第一個元素
        element element.querySelectorAll(CSS);                      //返回CSS選擇器指定的全部元素
                //節點添加、刪除、修改
        bool    element.hasChildNodes();                            //檢查元素是否有子節點
        bool    element.contains(node);                             //檢查element是不是node的後代
        node    element.cloneNode(bool);                            //返回克隆的節點(包括屬性) bool爲true時克隆後代
        node    element.appendChild(node);                          //將節點newnode移動到element元素中最後的位置                     
        node    element.insertBefore(node, childnode);              //將節點newnode移動到element元素中子節點childnode前
        node    element.removeChild(node);                          //從元素element中移除子節點node並返回
        node    element.replaceChild(newnode, oldnode);             //在元素element中替換oldnode爲newnode並返回oldnode
                //元素屬性
        bool    element.hasAttribute(attr);                         //檢查元素是否有指定的屬性attr
        bool    element.hasAttributes();                            //檢查元素是否有屬性
        void    element.setAttribute(name, value);                  //給元素添加或修改屬性 name爲屬性名 value爲屬性值
        node    element.setAttributeNode(node);                     //給元素添加或修改屬性節點node                 
        string  element.getAttribute(attr);                         //獲得元素指定的屬性attr的值
        node    element.getAttributeNode(attr);                     //獲得元素指定的屬性節點
        void    element.removeAttribute(attr);                      //移除元素指定的屬性attr
        node    element.removeAttributeNode(attr);                  //移除元素指定的屬性節點attr並返回
                //元素操做
        void    element.focus();                                    //給元素焦點
        void    element.blur();                                     //從元素上移除焦點
        void    element.click();                                    //模擬鼠標點擊元素
        int     element.compareDocumentPosition(node);              //比較兩個節點的位置
        bool    element.isContentEditable();                        //檢查元素是否可編輯
        bool    element.isEqualNode(node);                          //檢查兩個節點是否相等
        void    element.normalize();                                //合併相鄰的文本節點並刪除空的文本節點
        strint  element.toString();                                 //將一個元素轉換成字符串

 

DOM Attributes對象

//Attributes對象
        //屬性 
        string  attr.name;          //返回屬性節點的屬性名稱
        string  attr.value;         //設置或返回屬性節點的值
        bool    attr.specified;     //檢查屬性是否設置了值

        //方法
        node  nodemap.getNamedItem(name);    //從節點列表中返回指定屬性名的節點
        node  nodemap.item(index);           //從節點列表中返回指定索引的節點
        node  nodemap.removeNamedItem(name); //從節點列表刪除指定屬性名的節點
        node  nodemap.setNamedItem(name);    //從節點列表添加或修改指定屬性名的節點
        int   nodemap.length();              //返回節點列表的節點數目