02JavaScript动画DOM——获取节点、动态创建、添加、修改、删除、克隆元素

DOM对象

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。HTML DOM 定义了所有HTML 元素的对象和属性,以及访问它们的方法,也就是说HTML DOM 是一套标准规则:关于如何获取、修改、添加或删除

HTML 元的,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,DOM独立于具体的编程语言,可以用于

任何语言,xml,js,vbs,c,java,php等等,DOM操作实际上就是增删改查换element,text,attribute,comment(元素,文本,属性,注释),或者说对页面元素的增删改查操作以及获取,在JS中文档对象用关键字document表示

document对象常见的属性

lastModified    返回文档被最后修改的日期和时间。

referrer    返回载入当前文档的文档的URL,如果当前文档不是通过超链接访问的,则为空.(例:来到A页面的方法:直接在地址栏中输入A的地址,从B页面左击A的链接,跳转至A页面,从B页面右击点击A的链接,在新窗口中打开,从B页面右击点击A的链接,在新标签页中打开,拖动A的链接至地址栏,拖动A的链接至标签栏,使用浏览器的前进、后退按钮)// 拓展:这个属性包含在消息报头里发送到服务器,可以用作判断流量来源.

title  返回当前文档的标题。

URL  返回当前文档的 URL。

body 返回body节点对象

domain     可返回下载当前文档的服务器域

cookie       设置或返回与当前文档有关的所有缓存。

节点的获取

在获取节点时注释也会当做节点,常用的有两种,总共12种,

1、nextSibling:获取指定节点的下一个兄弟节点, 获取第一个ul的下一个兄弟节点,会将文本、空格、换行符都作为文本处理

2、nodeName:获取指定节点的节点名称

3、nodeType:获取指定节点的节点类型,返回值是number,1表示元素节点;3表示文本节点(#text),兼容问题:IE9、safari、chrome、firefox会将元素节点后面的换行部分作为文本节点处理,可以通过nodeType查看类型

4、 nextElementSibling:获取指定元素的的下一个兄弟元素,兼容问题:IE6、7、8不支持

// 兼容性判断
    if(uls[0].nextElementSibling){
        uls[0].nextElementSibling;
    }else{
        uls[0].nextSibling;
        if(uls[0].nextSibling.nodeType==1){
            // 表示为一个元素节点
        }
    }

5、previousSibling:获取指定节点的上一个兄弟节点

6、previousElementSibling:获取指定元素的上一个兄弟元素, 如果不存在相邻的兄弟元素,那么会返回null

7、lastchild:获取最后一个子节点
8、lastElementChild:获取最后一个子元素
9、firstChild:获取第一个子节点
10、firstElementChild:获取第一个子元素
11、childNodes:获取所有的子节点,是一个节点集合,返回空数组(不存在时)
12、children:获取所有的子元素节点,没有兼容问题,强力推荐!!!
13、parentNode:获取父节点,一定是一个元素节点

14、document.documentElement:获取Html元素
15、document.body:获取body元素
16、document.head:获取head元素

17、hasChildNodes():判断指定元素或节点是否存在子节点,返回布尔值,存在返回true不存在返回false

    元素节点              Node.ELEMENT_NODE(1)
    属性节点              Node.ATTRIBUTE_NODE(2)
    文本节点              Node.TEXT_NODE(3)
    CDATA节点             Node.CDATA_SECTION_NODE(4)
    实体引用名称节点       Node.ENTRY_REFERENCE_NODE(5)
    实体名称节点          Node.ENTITY_NODE(6)
    处理指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
    注释节点              Node.COMMENT_NODE(8)
    文档节点              Node.DOCUMENT_NODE(9)
    文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
    文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
    DTD声明节点            Node.NOTATION_NODE(12)

JS动态创建元素

createElement():创建指定类型的元素,需要一个参数,标签类型的字符串

添加元素

1、将元素添加到指定元素,appendChild():添加到指定元素的最后一个子级的末尾,document.body.appendChild(div);
    innerHTML可以为指定元素添加子元素,但是必须以标签字符串的形式赋值才可以,如果不希望覆盖之前的内容,就需要用+=赋值,document.body.innerHTML +="

";

2、将指定元素插入到指定元素的前面:

元素1.insertBefore(元素2,y元素3)(前面)、元素1.insertAfetr(元素2,y元素3)(后面)

元素1:元素2与元素3的父级

元素2:即将要插入的元素,元素2 如果已经存在于页面,那么会将它从原本的位置移动带元素3前/后面

元素3:插入参照元素2

删除元素

1、removeChild() 父级元素调用方法删除子级元素

2、remove() 子级元素调用方法,将自己从父级删除

3、innerHTML=""可以将指定元素所有子级元素删除

修改元素

replaceChild(new,old)  需要由old元素的父级来调用,可以用new来替换old,被替换的元素会被删除,元素位置的替换, 此方法有返回值会将被替换的元素返回

 克隆元素

cloneNode(boolean);   当参数为true时表示深克隆,false表示浅克隆

深克隆会将元素及内容都进行克隆,浅克隆只克隆元素,不会将内容克隆,克隆会将元素的属性一并克隆过来

setAttribute  removeAttribute  getAttribute

setAttribute(属性名,属性值)增加或修改元素属性值

getAttribute(属性名)获取元素属性值,可以获取元素的行间属性以及我们为元素添加的自定义属性;而通过.语法不能获取自定义属性的值

 removeAttribute(属性名)删除指定属性的值

clo2.setAttribute("myType","clone");

console.log(clo2.getAttribute("myType"))

clo2.removeAttribute("myType");

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript,DOM,动画创建元素,元素的增删改,节点的获取)