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();              //返回节点列表的节点数目