• html dom的理解


    DOM (Document Object Model)文档对象模型,将html文档以及文档中的内容转换成node接口,以便外部(如js)操作(如修改html内容等)。

      node节点的类型:

        DocumentType(如下)、

        Document(一个文档对应一个对象)、

        Element(html、head、body等)、

        Text(html文档中,标签之间,如下的div1和divc1之间虽然看着没有什么,其实是有一个内容为''的Text节点)

        Attribute(标签的属性,如id=”div1“就是一个属性节点)

        Comment(注释)

        DocumentFragment (没见过)

    <!DOCTYPE html>                  DocumentType   
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="div1">
                <div class="divc1">
                    <div id="div">
                        文本节点
                    </div>
                    <!--注释--></div>
            </div>
        </body>
    </html>

    DOM是浏览器对外提供的一个编程接口,包含的接口中我们要用到的关系如下:

      NodeList

      HTMCollection

      Node

        Document

        Element

        Attr

      Attr的使用是在Element中有个attributes属性,返回一个类数组,里面的对象都是Attr。

      这里需要注意的是Node和Element连个接口,我们在前端开发中使用js操作html标签对应的对象,使用的都是Element接口的属性和方法(自己这样认为)。

    更多见:http://www.w3help.org/zh-cn/causes/SD9024

    http://javascript.ruanyifeng.com/dom/element.html(新地址:https://wangdoc.com/javascript/)

    Node接口的属性与方法:

      属性:

        nodeType

        nodeName

        nodeValue

        textContent

        

        nextSibling

        previousSibling

        firstChild

        lastChild

        childNodes

        parentNode

        parentElement

        ownerDocument

        baseURI

      方法:

        appendChild()

        insertBefore()

        replaceChild()

        removeChild()

        contains()

        normalize()

        compareDocumentPosition()

        

        cloneNode()

        hasChildNodes()

        isEqualNode()

    Element:

      getAttribute(name)

      setAttribute(name,value)

      removeAttribute(name)

      getElementsByTagName()

      getElementsByClassName()

      getElementById()

    Document:

    HTML:

      HTMLDocument:

        title,referrer,URL,domain,body,images,applets,forms,links,anchors,cookie

        open(),close(),write(),writeln(),getElementsByName()

       HTMLElement:

        id,title,lang,dir,className

  • 相关阅读:
    Android.08.PopupWindow
    Android.07.AlertDialog
    Win 10 3D查看器 三维模型资源获取
    WebAssembly 系列(六)WebAssembly 的现在与未来
    《JavaScript高级程序设计》读书笔记(一)
    《JavaScript高级程序设计》读书笔记(二)
    WebAssembly 系列(五)为什么 WebAssembly 更快?
    《JavaScript DOM 编程艺术》读书笔记
    2.5维地图前端js api对比分析
    三维地图前端js api对比分析
  • 原文地址:https://www.cnblogs.com/z964166725/p/5926819.html
Copyright © 2020-2023  润新知