JavaScript的DOM学习

最新推荐文章于 2024-06-26 20:05:25 发布

web工作者

最新推荐文章于 2024-06-26 20:05:25 发布

阅读量500

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/u010716763/article/details/23968883

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM(document object modle )是指W3C定义的标准的文档对象模型。

在DOM中，文档有节点组成，节点的类型主要是包括元素节点，属性节点，文本节点。元素的属性不是元素的子节点

Node节点类型

Document 文件阶层中的根节点

Element 一个元素

Attr 一个属性，注意与其他节点类型不同，因为它们不是同一父节点的子节点

processingInstruction 处理命令

Comment 注释

Text 处于一个元素或一个属性中的文本内容（字符数据）

CDATASection 一块包含字符的文本区

Entity 实体

Node对象常用属性

Attributes 如果该节点是一个element，则以NamedNodeMap形式返回该元素的属性

childNodes 以node[]形式存放当前节点的子节点。

firstChild 以node[]形式放回当前节点的第一个子节点。没有则null

lastChild 以node[]形式放回当前节点的最后一个子节点。没有则null

nextSibling 以node[]形式放回当前节点兄弟下一个子节点。没有则null

nodeName 节点的名字，element节点则代表element的标记名称

nodeType 代表当前节点类型

parentNode 以node的形式返回当前节点的父节点

previousSibling 以node的形式返回紧凑当前节点，位于它之前的兄弟节点

Node对象常用方法

appendChild() 通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点

cloneNode(0 复制当前节点，或者复制当前节点以及它的所有子孙节点

hasChildNodes() 是否有子节点

insertBefore() 给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除再插入到它的位置

removeChild() 从文档树中删除并返回指定的子节点

replaceChild() 从文档树中删除并返回指定的子节点，用另一个节点替换它

访问文档中的对象

1.getElementsByTagName()方法

返回一个节点列表，可以通过使用方括号标记或使用item()方法来逐个访问这些节点

2.getElementsById()方法

3.getElementsByName()方法

创建节点

createAtrribute() 用指定的名字创建新的Atrr节点

createComment() comment节点

CreateElement() element节点

createTextNode() textNode 节点

插入和添加节点

appendChild() 通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点

insertBefore() 给文档树插入一个节点，位置在当前节点的指定子节点之前。

insertData() 在现有的文本节点中插入一个字符串

删除和替换节点

删除

removeChild()

deleteData() ---》从文本节点中删除指定范围的字符

替换

replaceChild()

replaceData() 替换一个文本节点的数据

对属性进行操作

createAtrribute()

setAtrribute()

getAtrribute

removeAtrribute()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>DOM demo</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<body>
   <script language="javascript">
    table =document.createElement("table");
	thbody=document.createElement("tbody");
	for(var i=0;i<3;i++){
	  tr=document.createElement("tr");  
	  for(var j=0;j<3;j++){
	    td=document.createElement("td");
		textcell=document.createTextNode("line ="+i+" column="+j);
		td.appendChild(textcell);
		tr.appendChild(td);
	  }
	  thbody.appendChild(tr);
	}
	table.appendChild(thbody);
	document.body.appendChild(table);
	table.setAttribute("border",2);
   </script>
  
  </body>
</html>

web工作者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的DOM学习

DOM(document object modle )是指W3C定义的标准的文档对象模型。在DOM中，文档有节点组成，节点的类型主要是包括元素节点，属性节点，文本节点。元素的属性不是元素的子节点 Node节点类型Document 文件阶层中的根节点Element 一个元素Attr 一个属性，注意与其他节点类
复制链接

扫一扫