zoukankan      html  css  js  c++  java
  • DOM

    1.HTML/XHTML/DHTML的区别和关系?

    HTML:<br>  <li>abcd    <h2 style=color:red>abcd

    XHTML: <br/> <li style="">abcd</li> 

    DHTML: Dynamic HTML,动态超文本标记语言,网页的内容(HTML)和表现(CSS)可以与用户之间发生交互,产生一些动态的可变化的效果。不是一门新技术。使用DHTML把浏览器窗口、网页内容都看做对象。使用DHTML提供的这些对象可以操作浏览器、网页内容。

    HTML  CSS    ES1

    内容 + 表现 + 行为 = DHTML

    DHTML对象分为两大类:

     (1)BOM对象:Browser Object Model,包括七个对象,用于操作浏览器本身,没有相关行业标准,但大部分浏览器厂家都提供了对这七个对象的支持。

     (2)DOM对象:Document Object Model,包括N个对象,每个对象对应于一个HTML标签,用于操作网页内容,W3C制定了DOM对象的标准。

    2.DOM对象

      W3C DOM对象分为三部分:

      (1)核心DOM对象:用于操作任意的ML文档

      (2)HTML DOM对象:专用于操作HTML文档

      (3)XML DOM对象:专用于XML文档

    <company>

    <dept dname="研发部">

    <emp eno="1001">

    <ename>Tom</ename>

    </emp>

    <emp eno="1002">

    <ename>Mary</ename>

    </emp>

    </dept>

    </company>

    DOM模型把一篇ML文档中的所有内容都看做一个节点对象(Node),节点对象又可以细分为:

     (1)文档节点 —— document node

     (2)元素节点 —— element node

     (3)属性节点 —— attribute node

     (4)文本节点 —— text node

     (5)注释节点 —— comment node

    一篇文档中的所有DOM对象组成一种“树形结构”,树的根是document对象,其它的节点对象都可以通过节点间的关系来查找:

     (1)父子关系:

       node.parentNode    有0/1个父节点

       node.childNodes   有0~n个子节点,组成一个类数组对象

       node.firstChild     一个节点的第一个孩子(0/1个)

       node.lastChild    一个节点的最后一个孩子(0/1个)

     (2)兄弟关系:

       node.nextSibling       一个节点的下一个兄弟节点(0/1个)

       node.previousSibling  一个节点的上一个兄弟节点(0/1个)

    除了上述属性外,每个节点还有三个必备的属性:

        node.nodeName  node.nodeType   node.nodeValue

    document   #document        9               null

    DOCTYPE    html              10              null

    元素节点     标签名(大写)        1               null

    属性节点     属性名             2               属性值

    文本节点     #text              3               文本内容

    注释节点     #comment         8              注释内容

    DOM: 是一组对象及成员属性和方法,可用于“增删改查”文档中的内容

    3.查找元素节点的简便方法——getElementById

      用法:  document.getElementById( '元素的id' )

      注意:与CSS选择器不同,此方法只能返回找到的第一个具有指定id的元素,剩余的不再查找——即方法的返回值要么是null要么是一个特定的元素。

    4.查找元素节点的简便方法——getElementsByTagName

      用法: document.getElementsByTagName('标签名')

            element.getElementsByTagName( '标签名' )

      注意:(1)此方法的返回值是一个类数组对象

    5.查找元素节点的简便方法——getElementsByName

      用法:  document.getElementsByName('name属性的值')

      说明: 此方法一般用于查找表单中的元素——只有表单中的元素才有name属性。返回值也是类数组对象,因为多个input的name属性值相同:

    <input type="radio" name="sex" value="男">

    <input type="radio" name="sex" value="女">

    6.查找元素节点的简便方法——getElementsByClassName

      用法:  document.getElementsByClassName('class属性的值')

    element.getElementsByClassName('class属性的值')

      说明:此方法的返回值是一个类数组对象。老IE不支持此方法!!

    7.(重点)查找元素节点的简便方法——使用CSS选择器来查找元素

      用法:  element.querySelector( 'CSS选择器' );  //返回一个对象

        element.querySelectorAll( 'CSS选择器' ); //返回一个类数组对象

    补充小知识点:

    a标签的href属性是必需的!

    href=""    含义:刷新当前页面

    href="#"   含义:跳转到当前页面的起始点

    href="#ch1" 含义:跳转到指定的锚点

    href="2"   含义:跳转到页面URL为2的页面

    href="javascript: void(0)"   含义:不做任何的页面跳转

    href="javascript: void(f1())"   含义:调用f1()函数且不做任何页面跳转

    (1)遍历DOM树

    (2)getElementById

    (3)getElementByTagName

    (4)getElementByName

    (5)getElementByClassName

    (6)querySelector——老IE不支持

    1.选取DOM树上的元素节点的其它方法

    (1)document.all    返回文档中所有的节点组成的集合

    (2)document.documentElement    返回<html>节点对象

    (3)document.head   返回<head>节点对象

    (4)document.body   返回<body>节点对象

    2.获取/设置元素节点的内容

    <h1>一号标题</h1>

      (1)  h1.firstChild.nodeValue

      (2)  h1.innerHTML   读取/设置元素中的内容(可以包含子标签)

      (3)  h1.textContent   读取/设置元素中的文本内容(不包含子标签)  ——  符合DOM标准

      (4)  h1.innerText  读取/设置元素中的文本内容(不包含子标签)  ——  老IE的写法

    3.读取/设置元素节点的属性

      (1)element.attributes    返回一个类数组对象,包含当前元素对象的所有属性节点,如:

        div.attributes[2].nodeValue

      (2)element.getAttributeNode('属性名')  返回一个属性节点对象,可以使用nodeName、nodeValue访问该对象

      (3)element.getAttribute('属性名')  返回一个string,内容即为指定属性的值

      (4)element.setAttribute('属性名',  '属性值')   修改元素的属性

      (5)element.removeAttribute('属性名')    删除指定的属性

      (6)element.hasAttribute('属性名')   判定元素是否声明了指定的属性

    4.DOM树: 节点树和元素树

      节点树:  元素节点、文本节点、属性节点、注释节点...

      元素树:  元素节点

     一篇文档,既可以看做是一颗节点树,也可以看做时一颗元素树——元素树是节点树的子集,操作起来要比节点树方便。

    节点树

    元素树

    根对象:document

    根对象:document

    childNodes

    children

    firstChild

    firstElementChild

    lastChild

    lastElementChild

    parentNode

    parentElementNode

    nextSibling

    nextElementSibling

    previousSibling

    previousElementSibling

    提示:元素树相关属性老IE不支持。

    <ul>

    <li>ABC</li>

    <li>XYZ</li>

    </ul>

    5.在DOM树上添加新的节点

      添加新DOM节点对象,需要两步:

      (1)创建出新的节点对象

    var e = document.createElement('标签名')

    var t = document.createTextNode('文本内容')

    var c = document.createComment('注释内容')

    var a = document.createAttributeNode('属性名')

      (2)把新建的节点对象挂到DOM树上

    parent.appendChild( newChild )  //把新建的节点追加为父节点的最后一个孩子节点

    parent.insertBefore( newChild,  existingChild )  //把新建的节点添加到已经存在的子节点之前

  • 相关阅读:
    Fix Installing .NET Framework 3.5 failed Error Code 0x800F0954 on Windows 10
    RHEL8安装五笔输入法
    Enable EPEL and Local Repository on RHEL8
    Why is Yum Replaced by DNF?
    检查Linux服务器是否被攻击的常用命令及方法
    IDEA 主题
    IDEA 如何显示一个类中所有的方法
    Appium 安装以及安装过程中遇到的问题
    Maven 如何发布 jar 包到 Nexus 私库
    java泛型的基本使用
  • 原文地址:https://www.cnblogs.com/baiyanfeng/p/5042875.html
Copyright © 2011-2022 走看看