javascript 快速入门之第四章 DOM编程的节点操作

一:DOM的概念:

  • DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型,例如我们写的html文件实际上是一个文档文件,通过我们的浏览器把它编译成了一个对象模型,这个模型就是document对象。

  • DOM 以树结构表达 HTML 文档。就好像是一个家族谱,有父级元素也有对应的子级元素,那么document对象就是我们最大的父级元素。

  • 如下图所示,家族谱上面的每一个元素都是一个节点,通过对这些节点的操作,我们可以对这个页面为所欲为。

javascript 快速入门之第四章 DOM编程的节点操作_第1张图片 

 

二:节点的分类

  • 元素节点

  • 属性节点 nodeName,nodeValue,nodeType

  • 文本节点

三:DOM编程对象的属性方法:

javascript 快速入门之第四章 DOM编程的节点操作_第2张图片

 四:DOM的基本节点操作:

完整操作方法如图所示:

javascript 快速入门之第四章 DOM编程的节点操作_第3张图片

五:案例演示

  •  案例:全选与全不选




	
	Document
	


	

全选案例

全选|全不选 编号 姓名 性别 年龄
1 李白 34
2 刘邦 22
3 武则天 16
  •  案例:演示DOM编程中的节点操作




	
	DOM编程之节点操作
	
	


	

DOM之元素获取方式

  • getElementById() 根据id获取元素
  • getElementsByName() 根据name属性获取同一组类型的元素
  • getElementsByTagName 根据标签本身获取同一组类型的元素

关于DOM中的节点获取:节点获取时根据属性获取值

1.getAttribute();获取标签属性的值


2.setAttribute();重新设置值

百度一下

3.移除属性值removeAttribute

  •  案例:演示DOM编程中的层级式元素获取 




	
	Document
	


	

DOM操作中的层级式元素获取

  • 111111
  • 222222
  • 33333
  • 44444
  • 55555
  • 66666
  •  案例:演示DOM编程中的节点创建操作




	
	Document
	


	
  • item1
  • item2
  • item3
  • item4
  • item5
  • 案例:表格的新增操作




	
	Document
	


	
编号 商品名称 价格
  • 案例:表格方法操作




	
	Document
	
	


	
编号 商品名称 价格



你可能感兴趣的:(javascript,前端)