关于dom简单的知识

Dom   

-----------------------------------

Dom的定义

1、Document  object  model  文档对象模型

2、为什么叫文档对象模型呢？

 Dom可以将标记型(html xml)文档转换为对象

  可以将标记型文档的每一个标记转换为对象

将文档或者标记封装成对象后，对象可以有更多的属性和方法操作文档。

3、节点的概念

在dom的结构图中，我们可以看到，图有元素节点构成

每一个html元素都是一个节点

节点分为：文本节点  元素节点   属性节点

---------------------------------------------------------------

DHTML简介

1、DHTML 就是动态的Html，是多个技术的综合

Html：封装的数据对象

Css：对数据对象进行修饰

Dom：对数据对象进行操作访问的方法

Javascript：实现对对象的灵活操作，是“粘合剂”

BOM的概念

BOM   browser  object  model  窗口对象模型

|--document 文档对象

|--history  历史对此昂

|--location  地址对象

|---screen  屏幕对象

窗口对象模型：包括文档对象模型 以及 窗口本身的一些对象

--------------------------------------------------------------------

Dom访问的几种方法

1、document.getElementById("对象名称")；独立访问某个对象的时候可用

2、document.getElementsByName("对象的name");返回的是一个数组（节点列表）

3、Document.getElementsByTagName(“标签名称”)  返回的是一个对象数组

---------------------------------------------------------------------

如何获取Dom网页中所有的网页对象

我们使用document.all（获取所有网页中的对象）

注意：

1、在获取网页所有的对象时，第一个节点会获取一个“！”，它是网页的W3C规范生命

2、在获取table对象的时候我们会获取到一个tbody，他是属于table的

我们可以使用document.all.id获取指定id的对象

但是注意，如果我们获取的id有多个对象，则返回的是一个节点列表

可以通过document.all(下标)方式获取网页的对象，不建议使用

Document.image  可以获取网页中的所有图片

---------------------------------------------------------------------

Parent 访问父节点

Element.

node.firstChild：获取第一个子节点对象

node.lastChild：获取最后一个子节点对象

node.parentNode  获取node的父节点对象

Node.childnodes   获取node的所有子节点，返回借点列表的对象数组

hasChildNode()  判断是否存在子节点  有的返回true  没有的返回false

Node.tagname  获取node的元素名称

           如果不是元素的话，不能使用tagName

1、关于dom访问的时候，只访问不分内容

   1、先获取父对象

  2、再获取子对象，进行操作

     getElementById------>getElementsByTagName()

 

 

innerHtml 向文本节点中写入数据（它会替换原来的内容）

实现追加：1、先获取原来的数据

         2、原来的数据+新的内容

Dom访问常见属性（二）

删除节点：removeChild  删除某个对象的子节点

添加节点：

1）、添加元素节点  createElement（“元素的名称”）创建的是个标签

2）、添加文本节点    createTextNode（“文本的内容”）  创建的是内容

3）、添加节点  使用  apendChild 把我们定义好的元素节点或者文本节点  追加到对象的子节点中