DOM学习笔记

DOM(文档对象模型,Document文档,Object对象,Model模型)       在开发中的地位和作用1、解释下面名词   HTML XHTML DHTML XML:   HTML:超文本标记语言,专门编写网页内容的语言        --元素定义可大小写   XHTML:严格的HTML语言标准                                   ...
摘要由CSDN通过智能技术生成

DOM(文档对象模型,Document文档,Object对象,Model模型)

       在开发中的地位和作用

1、解释下面名词

   HTML XHTML DHTML XML:

   HTML:超文本标记语言,专门编写网页内容的语言        --元素定义可大小写

   XHTML:严格的HTML语言标准                                      --元素定义小写

   DHTML:动态网页技术的统称  DHTML=HTML+CSS+JS

   XML:可扩展的标记语言,可自定义标签,主要有配置文件和存储数据格式两种功能

        专门用来存储/传输自描述的结构化数据,逐渐被json替代了

   

2、BOM 与 DOM 区别

   BOM:浏览器对象模型(API),专门操作浏览器窗口的API,没有标准

   DOM:文档对象模型(API),专门操作网页内容的API,可以对网页中任意对象,做任何修改,DOM是标准,90%以上浏览器都严格兼容

 

3、W3C DOM由以下三部分组成:

核心DOM - 针对任何结构化文档(XML,HTML)的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

 

HTML DOM不能完成所有功能,实际开发中都是核心DOM与HTML DOM配合使用。

HTML DOM:网页中一切都是对象(元素,属性,文字)

             同一网页中的所有对象,在内存中父子相连,形成一棵DOM树。

 

4、DOM树:

    文档中的每个元素,属性,文字,注释,都被看做一个节点对象——Node——所有节点对象的父类型

    当网页被加载进内存时,浏览器会为网页创建一个document对象。所有节点对象都是document对象的子节点。

document,封装了对网页中所有子节点的增加,删除,查找

DOM节点树

 

5、七种常见的DOM节点类型(共12个)

例、

<!DOCTYPE html>  <html lang="en">

 <head>  

      <meta charset="UTF-8">  

<title>DocumentFragment文档片段节点</title>  

</head>  

<body> <!-- tip区域 -->

      <div id="tip">test1</div>

      <ul class="list-node">

        <li>test2<li>

      </ul>  

     <script>  

        var frag = document.createDocumentFragment();  

        for (var i = 0; i < 10; i++) {  

            var li = document.createElement("li");  

            li.innerHTML = "List item" + i;  

            frag.appendChild(li);  

        }  

        document.getElementById("list-node").appendChild(frag);  

</script>  

</body>  

</html>  

①Element(元素节点):

是组成文档树的重要部分,它表示了html、xml文档中的元素。通常元素因为有子元素、文本节点或者两者的结合,元素节点是唯一能够拥有属性的节点类型。

例子中的:html、heade、meta、title、body、div、ul、li、script都属于Element(元素节点);

②Attr(属性节点):

代表了元素中的属性,因为属性实际上是附属于元素的,因此属性节点不能被看做是元素的子节点。因而在DOM中属性没有被认为是文档树的一部分。换句话说,属性节点其实被看做是包含它的元素节点的一部分,它并不作为单独的一个节点在文档树中出现。

例子中的:lang、charset、id、class都属于Attr(属性节点);

③Text(文本节点):

是只包含文本内容的节点,在xml中称为字符数据,它可以由更多的信息组成,也可以只包含空白。在文档树中元素的文本内容和属性的文本内容都是由文本节点来表示的。

例子中的:DocumentFragment文档片段节点、test1、test2、元素节点之后的空白区域都属于Text(文本节点);

④Comment(注释节点):

表示注释的内容

例子中的<!-- -->都属于Comment(注释节点);

⑤Document(文档节点) :

是文档树的根节点,它是文档中其他所有节点的父节点。要注意的是,文档节点并不是html、xml文档的根元素,因为在xml文档中,处理指令、注释等内容可以出现在根元素之外,所以我们在构造DOM树的时候,根元素并不适合作为根节点,因此就有了文档节点,而根元素是作为文档节点的子节点出现的。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值