A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© wzg682735 中级黑马   /  2016-6-22 11:00  /  1973 人查看  /  1 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

一、基本概念
--------------------------------------------------------------------------        
        HTML DOM 定义了访问和操作HTML文档的标准方法。
        HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
        DOM 被分为不同的部分:
          1.Core DOM
                定义了一套标准的针对任何结构化文档的对象
          2.XML DOM
                定义了一套标准的针对 XML 文档的对象
          3.HTML DOM
                定义了一套标准的针对 HTML 文档的对象。
        
        节点:根据 DOM,HTML 文档中的每个成分都是一个节点。
          DOM 是这样规定的:
                >整个文档是一个文档节点
                >每个 HTML 标签是一个元素节点
                >包含在 HTML 元素中的文本是文本节点
                >每一个 HTML 属性是一个属性节点
                >注释属于注释节点
        
        节点彼此间都存在关系。
                >除文档节点之外的每个节点都有父节点。
                >大部分元素节点都有子节点。
                >当节点分享同一个父节点时,它们就是同辈(同级节点)。
                >节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点
                >节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点
        
        查找并访问节点
          你可通过若干种方法来查找您希望操作的元素:
                >通过使用 getElementById() 和 getElementsByTagName() 方法
                >通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
        
        节点信息
          每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
                nodeName(节点名称)
                nodeValue(节点值)
                nodeType(节点类型)

        nodeName 属性含有某个节点的名称。
                元素节点的 nodeName 是标签名称
                属性节点的 nodeName 是属性名称
                文本节点的 nodeName 永远是 #text
                文档节点的 nodeName 永远是 #document
        


二、HTML DOM 对象参考
----------------------------------------------------------------------
        Document: 代表整个 HTML 文档,可被用来访问页面中的所有元素
                常用集合属性:forms
        Anchor         : 代表 <a> 元素
        Area         : 代表图像映射中的 <area> 元素
        Base         : 代表 <base> 元素
        Body         : 代表 <body> 元素
        Button         : 代表 <button> 元素
        Event         : 代表某个事件的状态
        Form         : 代表 <form> 元素
        Frame         : 代表 <frame> 元素
        Frameset: 代表 <frameset> 元素
        Iframe         : 代表 <iframe> 元素
        Image         : 代表 <img> 元素
        Input button         : 代表 HTML 表单中的一个按钮
        Input checkbox         : 代表 HTML 表单中的复选框
        Input file                 : 代表 HTML 表单中的文件上传
        Input hidden         : 代表 HTML 表单中的隐藏域
        Input password  : 代表 HTML 表单中的密码域
        Input radio         : 代表 HTML 表单中的单选按钮
        Input reset         : 代表 HTML 表单中的重置按钮
        Input submit         : 代表 HTML 表单中的确认按钮
        Input text                 : 代表 HTML 表单中的文本输入域(文本框)
        Link         : 代表 <link> 元素
        Meta         : 代表 <meta> 元素
        Object  : 代表 <Object> 元素
        Option  : 代表 <option> 元素
        Select         : 代表 HTML 表单中的选择列表
        Style         : 代表单独的样式声明
        Table         : 代表 <table> 元素
        TableData : 代表 <td> 元素
        TableRow  : 代表 <tr> 元素
        Textarea  : 代表 <textarea> 元素
        
        第七天 继续讲解DOM(重点讲XML DOM)
====================================================================
一、HTML的DOM
---------------------------------------------------------
        Object  : 代表 <Object> 元素
        Option  : 代表 <option> 元素
        Select         : 代表 HTML 表单中的选择列表
        Style         : 代表单独的样式声明
        Table         : 代表 <table> 元素
        TableData : 代表 <td> 元素
        TableRow  : 代表 <tr> 元素
        Textarea  : 代表 <textarea> 元素
        
二、XML的DOM
---------------------------------------------------------
        DOM (Document Object Model) 文档对象模型
        1. document 文档  HTML XML 文件 (标记语言)
         <body>
                <div>
                        <!--  -->
                        <a href="#">wwww</a>
                </div>
         </body>
         节点:
                将文档想成一个倒树, 每一个部分(根、元素、文本(内容), 属性, 注释)都是一节点。
                根据 DOM,HTML 文档中的每个成分都是一个节点。

                DOM 是这样规定的:
                        1. 整个文档是一个文档节点(根节点)
                        2. 每个 HTML 标签是一个元素节点
                        3. 包含在 HTML 元素中的文本是文本节点
                        4. 每一个 HTML 属性是一个属性节点
                        5. 注释属于注释节点
                        
        2. 父、子和同级节点
                节点树中的节点彼此之间都有等级关系。

                父、子和同级节点用于描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点(兄弟或**)。
                        1. 在节点树中,顶端的节点成为根节点
                        2. 根节点之外的每个节点都有一个父节点
                        3. 节点可以有任何数量的子节点
                        4. 叶子是没有子节点的节点
                        5. 同级节点是拥有相同父节点的节点
               
                只要知道一个节点, 按关系找到其它节点
                        父节点:   parentNode
                        子节点(第一个, 最后一个) childNodes    firstChild   lastChild
                        同胞(同辈)节点 (上一个, 下一个)nextSibling   previousSibling

        3。 获取节点的方式:
                array  getElementsByTagName("节点名"); //获取所对应节点名(所有),返回的是数组
                object getElementById("id名"); //获取id名的唯一节点对象
               
                示例:(找节点)
                        document.getElementsByTagName("li"); //所有所有li节点
                        document.getElementById("lid"); //获取id值为lid的唯一节点
                        document.getElementById("uid").getElementsByTagName("li");
                        //获取id值为uid中所有li子节点
                        document.getElementsByTagName("ul")[0].getElementsByTagName("li");
                        //获取第一个ul节点中所有li子节点
                        
                获取到的标记名(多个)、 id(唯一)、 name(多个)
               
        4. 每个节点中的内容
                        节点类型nodeType、节点名nodeName,节点值nodeValue
               
                节点名nodeName:
                        nodeName 是只读的
                        元素节点的 nodeName 与标签名相同
                        属性节点的 nodeName 是属性的名称
                        文本节点的 nodeName 永远是 #text
                        文档节点的 nodeName 永远是 #document
                        
                节点值nodeValue
                        元素节点的 nodeValue 是 undefined
                        文本节点的 nodeValue 是文本自身
                        属性节点的 nodeValue 是属性的值
               
                nodeType(节点类型)
                     元素类型                节点类型
                                元素                        1
                                属性                        2
                                文本                        3
                                注释                        8
                                文档                        9

                        
         4. Object 对象 (HTML元素 转成的对象(js对象))
        注意: 如果使用js操作HTML文档, 就需要选将HTML文档结构转成Js对象
                a. 操作属性:
                        nodeName(节点名称)
                        nodeValue(节点值)
                        nodeType(节点类型)
                        其他属性:(针对于节点)
                                childNodes 返回节点到子节点的节点列表。
                                firstChild 返回节点的首个子节点。
                                lastChild 返回节点的最后一个子节点。
                                nextSibling 返回节点之后紧跟的同级节点。
                                previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级)                                
                                parentNode 返回节点的父节点。
                                textContent设置或返回节点及其后代的文本内容。
                                       
                b. 操作内容
                        innerText(IE) textContent(FF) //获取的是显示的内容,不包含HTML标签
                        innerHTML //获取的是显示的内容,会包含HTML
                        outerText
                        outerHTML
                        表单
                           value
                c. 操作样式
                        aobj.style.backgroundColor="red";
                        aobj.style.fontSize="3cm";
                        className
                        aobj.className="test";
                        aobj.className+=" demo";
                        aobj.className="";
                e. 操作节点:
                        appendChild()         向节点的子节点列表的结尾添加新的子节点。
                        cloneNode()                复制节点。
                        removeChild()        删除(并返回)当前节点的指定子节点。
                        replaceChild()         用新节点替换一个子节点。
                        hasAttributes() 判断当前节点是否拥有属性。  
                        hasChildNodes() 判断当前节点是否拥有子节点。
                        insertBefore()  在指定的子节点前插入新的子节点。

                f. 创建节点:
                        * createElement() 创建元素节点
                          createAttribute() 来创建属性节点  可以:元素节点.属性名=值;
                          createTextNode() 来创建新的文本节点 可以:元素节点.innerHTML=文本内容;

                有了以上三点的操作之前先转成对象
                转成对象的两种形式:
                 1.  标记名(多个)、 id(唯一)、 name(多个)
                         document中的三个方法
                        var objs=document.getElementsByTagName("div"); //获取多个
                        var objs=document.getElementById("one");        //获取一个
                        var objs=document.getElementsByName("two");

1 个回复

倒序浏览
可以的,兄弟。。。。。。。。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马