zoukankan      html  css  js  c++  java
  • DOM

    DOM(Document Object Model )

    DOM是文档对象模型 ,DOM是关于创建,插入,修改,删除页面元素的标准。页面中的内容本质上都是字符串,但是js会把这些字符串转成DOM树,DOM树中的内容会被解析成DOM节点,那就是说,我们在操作DOM本质上就是操作每一个节点,页面中的任何内容都是节点。

    attributes

    元素的所有属性集合。每一个属性都会对应一个下标,它还有一个length属性,代表属性的个数。

    html代码

    1 <div id="div1" class="div1" style="100px"></div>

    js代码

    1 var div1=document.getElementById("div1");
    2 console.log(div1.attributes);//{0: id, 1: class, 2: style, length: 3}

    nodeType

    语法:

    1 节点.nodeName;

    返回值:
    返回节点的类型,这个节点类型是一个数字。

    html代码

    1 <div id="div1"></div>

    js代码

    1 var div1=document.getElementById("div1");
    2 console.log(div1.nodeType);//1

    nodeName

    语法:

    1 节点.nodeName;

    返回值:
    返回节点的名字。

    html代码

    1 <div id="div1"></div>

    js代码

    1 var div1=document.getElementById("div1");
    2 console.log(div1.nodeName);//DIV

    任何节点都有这个属性(文本、注释)。

    tagName

    语法:

    1 元素.tagName;

    返回值:
    返回元素的标签名(大写)。

    1 console.log(document.body.tagName);//BODY

    只有标签元素才有这个属性。

    parentNode

    语法:

    1 节点.parentNode;

    返回值:
    返回这个节点的父节点。

    html代码

    1 <div id="box">
    2     <p id="p1"></p>
    3 </div>

    js代码

    1 var div1=document.getElementById("box");
    2 var p1=document.getElementById("p1");
    3 var div11=div1.attributes[0];
    4 var p11=p1.attributes[0];
    5 console.log(p1.parentNode);//div1
    6 console.log(p11.parentNode);//null

    属性节点是没有父节点的。

    childNodes

    语法:

    1 元素.childNodes;

    返回值:
    返回的是元素第一层的所有子节点的集合,包含文本和注释节点。

    children

    语法:

    1 元素.children;

    返回值:
    返回的是元素第一层的所有子节点的集合,但是它只包含标签元素。它是一个类数组,每一个子节点都会对应一个下标,可以通过下标值取到某个子节点。

    firstElementChild

    语法:

    1 元素.firstElementChild;

    返回值:
    返回这个元素下的第一个子节点,如果没有,返回null。

    lastElementChild

    语法:

    1 元素.lastElementChild;

    返回值:
    返回这个元素下的最后一个子节点,如果没有,返回null。

    previousElementSibling

    语法:

    1 节点.previousElementSibling;

    返回值:
    返回节点的上一个兄弟节点,如果没有找到,那返回一个null。

    nextElementSibling

    语法:

    1 节点.nextElementSibling;

    返回值:
    返回节点的下一个兄弟节点,如果没有找到,那返回一个null。

    offsetParent

    作用:
    找到最近的有定位(不能为static)的父级,它会一层一层往外找,如果没找到的话,默认为body。父级必需为相对定位或者绝对定位,自己有没有定位无所谓。

    语法:

    1 元素.offsetParent;

    offsetTop

    作用:
    找到最近的有定位的父级,获取到它与父级的top距离(从元素的最上边到定位父级的最上边的距离 )。

    语法:

    1 元素.offsetTop;

    如果没找到有定位的父级,默认是到html的距离。

    offsetLeft

    作用:
    找到最近的有定位的父级,获取到它与父级的left距离(从元素的最左边到定位父级的最左边的距离)。

    语法:

    1 元素.offsetLeft;

    如果没找到有定位的父级,默认是到html的距离。

    getAttribute()

    作用:
    获取属性,它不光能获取标签自带的属性,也可以获取到自定义属性。

    语法:

    1 元素.getAttribute(属性名);

    参数:
    要获取的属性名字。

    返回值:
    返回属性名对应的属性值,假如是src或者href地址,里面的地址是什么,获取到的就是什么(颜色值也一样)。

    setAttribute()

    作用:
    设置属性,可以设置自定义属性,也可以设置标签自带的属性。

    语法:

    1 元素.setAttribute(attr,value);

    参数:
    attr 要设置的属性名。
    value 要设置的属性值。

    返回值:
    无。

    removeAttribute()

    作用:
    删除属性。

    语法:

    1 元素.removeAttribute(attr);

    参数:
    要删除的那个属性名字。

    返回值:
    无。

    getBoundingClientRect()

    作用:
    获取元素的盒模型的相关信息(如:width、height、left等)。

    语法:

    1 元素.getBoundingClientRect();

    返回值:
    返回一个对象,这个对象当中存了元素的盒模型的相关信息。

    注意:
    得到的left,是元素左边到左边可视区的距离。
    得到的right,是元素右边到左边可视区的距离。
    得到的top,是元素上边到上边可视区的距离。
    得到的bottom,是元素下边到上边可视区的距离。
    得到的width,是包含边框的。

    createElement()

    作用:
    根据参数的名字创建相对应的标签。

    语法:

    1 document.createElement(tagName);//只有document才有这个方法

    参数:
    要创建的标签名字。

    返回值:
    返回新创建的元素。

    创建后的标签可以给它添加属性样式等,但是它不能创建文本、注释节点。

    appendChild()

    作用:
    往父级元素里面添加相应的子节点。

    语法:

    1 父节点.appendChild(childNode);

    参数:
    要添加的元素(只能是一个标签节点)。

    返回值:
    返回要添加的那个元素(参数)。

    removeChild()

    作用:
    删除节点。

    语法:

    1 父节点.removeChild(childNodes);

    参数:
    要删除的子节点(只能为单个节点)。

    返回值:
    被删除的元素(参数),这个方法可以把文本节点与注释节点删掉。

    insertBefore()

    作用:
    插入节点,把一个节点插入到另一个节点前面。

    语法:

    1 父节点.insertBefore(childNode1,childNode2);

    参数:
    childNode1 要插入的节点。
    childNode2 决定插入节点位置的节点。

    第二个参数的结果为null的话,相当于appendChild,把参数1的节点添加到父节点的最后。两个参数必需同时存在,不然会报错 。

    返回值:
    返回要插入的节点(第一个参数) 。

    replaceChild()

    作用:
    替换节点,用节点1替换节点2 。

    语法:

    1 父节点.replaceChild(node,childNode);

    参数:
    node 替换成的节点。
    childNode 被替换的节点。
    两个参数必需同时出现,不然报错。

    返回值:
    返回被替换掉的那个元素(参数2)。

    cloneNode()

    作用:
    克隆节点。

    语法:

    1 要被克隆的节点.cloneNode(Boolean);

    参数:
    true 克隆元素和元素包含的子孙节点。
    false 克隆元素但不包含元素的子孙节点。
    如果没有参数,默认为false。

    返回值:
    返回被克隆的节点。

    文本节点与注释节点都可以被克隆,克隆的只克隆css、html不克隆js。克隆后的节点的id与原来的是一样,所以要修改一下。

    可视区的宽高

    1 document.documentElement.clientWidth;//可视区的宽
    2 document.documentElement.clientHeight;//可视区的高

    如果窗口改变,这两个值也会改变。

    获取元素的宽高

    元素的宽:

    1 元素.offsetWidth;//得到元素的宽度,包含边框
    2 元素.clientWidth;//得到元素的宽度,不包含边框

    元素的高:

    1 元素.offsetHeight;//得到元素的高度,包含边框
    2 元素.clientHeight;//得到元素的高度,不包含边框

    滚动条距离

    1 document.body.scrollTop;//Chrome
    2 document.documentElement.scrollTop;//其它

    DOM操作元素的特性

    appendChild、insertBefore、replaceChild在操作一个已有的元素时, 是将已有的元素移动(剪切),而不是复制一份进行操作。

    innerHTML与DOM的区别

    用innerHTML方法添加后,其它是先把原来的内容清空,再把新的内容添加进来,所以原来的事件会被删除。

    DOM方法只是在原来的基础上增加了一些元素,原来的事件还会有。

    动态获取元素和静态获取元素

    getElementsByTagName:

    动态获取元素,一旦获取的元素有变化,那它就会重新获取一下,原来的索引就会变成新获取的。

    querySelectorAll:

    静态获取元素,只获取一次,每个元素对应的下标是不会变的,即使元素有变化,它也不会重新再去获取,原来的下标不会变。

  • 相关阅读:
    BZOJ 3132: 上帝造题的七分钟 树状数组+差分
    PAT Advanced 1006 Sign In and Sign Out (25 分)
    PAT Advanced 1011 World Cup Betting (20 分)
    PAT Basic 1032 挖掘机技术哪家强 (20 分)
    PAT Basic 1028 人口普查 (20 分)
    PAT Basic 1004 成绩排名 (20 分)
    大数据数据库HBase(二)——搭建与JavaAPI
    PAT Advanced 1009 Product of Polynomials (25 分)(vector删除元素用的是erase)
    PAT Advanced 1002 A+B for Polynomials (25 分)(隐藏条件,多项式的系数不能为0)
    PAT Basic 1041 考试座位号 (15 分)
  • 原文地址:https://www.cnblogs.com/imguo/p/5768948.html
Copyright © 2011-2022 走看看