• 周一. 5月 27th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

回顾——Dom节点类型

admin

11月 28, 2021

DOM 节点

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

节点层次

DOM(Document Object Model——文档对象模型是用来呈现HTML或XML文档交互的一个API(应用程序编程接口)。

dom将任意HTML或XML文档描述成一个由多层节点构成的结构(节点树)。

Node类型(节点类型)

DOM1级定义了一个Node接口。

Node接口由DOM中的所有节点类型实现。

除IE外,所有节点类型继承了Node节点类型

Node节点类型共有12种,由12个数值常量来表示,如下:

控制台运行例子:

nodeType、nodeName、nodeValue相关

 

例子:

<body>
    大头
    <!-- 毛毛最帅 -->
    <h3 id="main"></h3>
    <a id="aid" href="https://www.baidu.com"></a>
   
    <script>
        //文档节点 
        var doc = document;
        console.log('===文档节点',doc.nodeName, doc.nodeType, doc.nodeValue);

        // DocumentType
        var docType = document.doctype;
        console.log('===DocumentType类型',docType.nodeName, docType.nodeType, docType.nodeValue);

        //元素节点
        var div_main = document.getElementByTagName('h3')
        console.log('---元素节点',div_main.nodeName, div_main.nodeType, div_main.nodeValue);

        // 属性节点
        var a_aid = document.getElementById('aid').getAttributeNode('href')
        console.log('---属性节点',a_aid.nodeName, a_aid.nodeType, a_aid.nodeValue);

        //文本和注释节点
        var span_node = document.querySelector('body').childNodes
        span_node.forEach(function (item, index) {
           
            if(item.nodeType==1){
              console.log('===元素节点',item.nodeName, item.nodeType, item.nodeValue);
            }
            if(item.nodeType==3){
              console.log('===文本节点',item.nodeName, item.nodeType, item.nodeValue);
            }
            if(item.nodeType==8){
              console.log('===注释节点',item.nodeName, item.nodeType, item.nodeValue);
            }
            if(item.nodeType==9){
              console.log('===文档节点',item.nodeName, item.nodeType, item.nodeValue);
            }
        })

        // DocumentFragment类型
        var frag = document.createDocumentFragment();
        var p=document.createElement('p');
        p.innerHTML="hello world"
        p.append(frag);
        console.log('文档片段类型',frag.nodeType,frag.nodeName,frag.nodeValue)

    </script>
</body>

一步一叩首,今天的自己比昨天好一点就行,明天的自己需追寻

《回顾——Dom节点类型》有7个想法
  1. Greate post. Keep posting such kind of info on your blog.
    Im really impressed by your blog.
    Hi there, You’ve performed an incredible job.
    I will definitely digg it and in my view recommend to my friends.
    I am confident they’ll be benefited from this web site.

  2. Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to far added agreeable from you! However, how could we communicate?

  3. Hi, I do think this is a great web site. I stumbledupon it
    😉 I’m going to come back yet again since I book-marked it.

    Money and freedom is the greatest way to change, may you be rich and continue to guide
    other people.

  4. Paragraph writing is also a fun, if you be acquainted with after that you can write or else it is difficult to write.

  5. Hello! I’ve been following your site for some time now
    and finally got the bravery to go ahead and give you a shout
    out from Atascocita Texas! Just wanted to mention keep up the great
    job!

  6. Howdy! I realize this is kind of off-topic however I needed
    to ask. Does operating a well-established blog like
    yours require a massive amount work? I’m completely new to writing a blog however I do write
    in my diary daily. I’d like to start a blog so I can share my experience and thoughts online.
    Please let me know if you have any recommendations or tips for new aspiring bloggers.
    Appreciate it!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注