javascript Dom 编程



javascript Dom  编程

知识概要:

(1)Dom是什么?

(2)Dom结构模型

(3)XML DOM和 HTML DOM

(4)NODE接口的特性和方法

(5)DOM结点的常用属性

(6)DOM结点的常见操作

1.Dom是什么?

document object model  文档对象模型
是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.
分类
DOM Core
XML DOM
HTML DOM
XML介绍

2.Dom结构模型

Dom树形结构图如下


XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式 符合XML语法标准,所以可以使用XML DOM API
在XML DOM每个元素 都会被解析为一个节点Node,而常用的节点类型又分为
元素节点  Element
属性节点  Attr
文本节点  Text

文档节点  Document
HTML DOM 定义了针对 HTML文档的对象,可以说是一套 更加适用于 JavaScript 技术开发 的API
HTML DOM是对XML DOM的扩展
进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM


Node结点的特性和方法:

特性/方法

类型/返回类型

    

nodeName

String

节点的名字;根据节点的类型而定义

nodeValue

String

节点的值;根据节点的类型而定义

nodeType

Number

节点的类型常量值之一

ownerDocument

Document

指向这个节点所属的文档

firstChild

Node

指向在childNodes列表中的第一个节点

lastChild

Node

指向在childNodes列表中的最后一个节点

childNodes

NodeList

所有子节点的列表

parentNode

Node

返回一个给定节点的父节点。

previousSibling

Node

指向前一个兄弟节点;如果这个节点就是第一个兄弟节
点,那么该值为null

nextSibling

Node

指向后一个兄弟节点;如果这个节点就是最后一个兄弟节
点,那么该值为null

hasChildNodes()

Boolean

childNodes包含一个或多个节点时,返回真

attributes

NamedNodeMap

包含了代表一个元素的特性的Attr对象;仅用于Element节点

appendChild(node)

Node

node添加到childNodes的末尾

removeChild(node)

Node

childNodes中删除node

replaceChild(newnodeoldnode)

Node

childNodes中的oldnode替换成newnode

insertBefore(newnoderefnode)

Node

childNodes中的refnode之前插入newnode

DOM 节点常用属性

nodeName
如果节点是元素节点,nodeName返回这个元素的名称
如果是属性节点,nodeName返回这个属性的名称
如果是文本节点,nodeName返回一个内容为#text 的字符串
nodeType
Node.ELEMENT_NODE     ---1    -- 元素节点
Node.ATTRIBUTE_NODE  ---2    -- 属性节点
Node.TEXT_NODE             ---3    -- 文本节点
nodeValue
如果给定节点是一个属性节点,返回值是这个属性的值
如果给定节点是一个文本节点,返回值是这个文本节点内容
如果给定节点是一个元素节点,返回值是 null



 
   DOM 
 
 

 
    

明天休息

DOm取值.html




 
   取li的文本值 
	
 

 
   
  • 北京

    海淀

    奥运
  • 上海


遍历option文本



 
   得到所有的option的文本 
 
 

 
  
	 
 


DOM节点常见操作
DOM 获取节点
DOM 改变节点
DOM 删除节点
DOM 替换节点
DOM 创建节点
DOM 添加节点
结点替换:



 
  结点替换
  
 

 
   
  • 北京
  • 湖南
  • 山东
  • 灰机

  • 抓泥鳅
  • 斗地主

添加结点:



 
   New Document 
  
 

 
  
	

 


表格操作:



 
   表格操作 
  
 

 
   
姓名: Email: 年龄:




姓名 Email 年龄 操作

   全选/反选/全不选 
   
 

 
     

请选择你的爱好:

全选/全不选
足球 篮球 游泳 唱歌
左移 全部移动


 
  下拉列表,选项左移右移 
   
 

 
  





省市级联:


 
   级联加载 
 
 

 
  

	


 







转载于:https://www.cnblogs.com/thankyou/p/4352133.html

你可能感兴趣的:(javascript Dom 编程)