添加到mybody . appendChild ( mytable ) ; // 将表格mytable的border属性设置为2 mytable . setAttribute ( " border " , " 2 " ) ; }
script > head > < body onload = " start() " > body > html >
注意我们创建各元素和文字节点的顺序：
1.创建< table >元素
创建完< table >,< tbody >,< tr >,< td >元素和文本节点，我们使用相反的顺序把它们分别添加到自己的父节点。
mycurrent_cell . appendChild ( currenttext ) ;
2.将列< td >添加到行< tr >
mycurrent_row . appendChild ( mycurrent_cell ) ;
3.将行< tr >添加到< tbody >
mytablebody . appendChild ( mycurrent_row ) ;
4.将< tbody >添加到< table >
mytable . appendChild ( mytablebody ) ;
5.将< table >添加到< body >
mybody . appendChild ( mytable ) ;
记住这个方法。当你使用W3C DOM时会经常用到它。首先，你从上向下建立元素；然后从下向上把它们添加到父节点。
... < table border = 5 > < tr >< td > 单元格是第0行，第0列 td >< td > 单元格是第0行，第1列 td >tr > < tr >< td > 单元格是第1行，第0列 td >< td > 单元格是第1行，第1列 td >tr > table >
这是代码生成的表格元素和它的子元素的DOM对象树：基本的DOM方法 － Sample2.html
< html > < head > < title > 实例代码 - 使用JavaScript和DOM创建HTML表格 title > < script >
function start () { // 获取一个包含所有body元素的列表（将只有一个） // 然后选择列表里的第一个元素 myBody = document . getElementsByTagName ( " body " )[ 0 ] ; // 获取body字元素中所有的p元素 myBodyElements = myBody . getElementsByTagName ( " p " ) ; //获取p元素列表的第二个元素（索引从0开始） myP = myBodyElements [ 1 ] ; }
script > head > < body onload = " start() " > < p > hi p > < p > hello p > body > html >
在这个例子里，我们设置myP变量为表示body里第二个p元素的DOM对象。
myBody = document . getElementsByTagName ( " body " )[ 0 ] ;
因为一个有效的html文档只有一个body元素，这个列表讲只有一项。我们通过使用 [0] 选取列表的第一个元素来得到它。
myBodyElements = myBody . getElementsByTagName ( " p " ) ;
3.选取p元素列表的第二项
myP . style . background = " rgb(255,0,0) " ;
使用document.createTextNode(”..”)创建文本节点
myTextNode = document . createTextNode ( " world " ) ;
以上代码创建一个文本数据是“word”的TEXT_NODE类型（文字块）节点，变量myTextNode指向这个节点对象。你需要设置这个文本节点为其他节点元素的字节点来插入这个文本到你的html页面里。使用appendChild(..)插入元素
myP . appendChild ( myTextNode ) ;
测试这个例子，注意“hello”和“world”两个词是连在一起的：“helloworld”。所以在当你看到html页面时两个文本节点
hello和world看起来好像是一个节点，而实际上在这个文档模型里有两个节点。第二个节点是一个新的TEXT_NODE类型节点，并且是第二个p标
签的第二个字节点。下图在文档树里显示了刚创建的文本节点。
createTextNode和appendChild是在hello和world之间添加空格的一种简单的方法。需要特别注意的是
appendChild方法将添加在最后一个子节点后面，就像world被添加到hello后面。所以如果你想在hello和world之间添加一个文本
节点需要使用insertBefore方法而不是appendChild。
使用文档对象和createElement(..)方法创建新元素
myNewPTAGnode = document . createElement ( " p " ) ; myBody . appendChild ( myNewPTAGnode ) ;
使用removeChild(..)方法删除节点
myP . removeChild ( myTextNode ) ;
最后你可以把包含单词world的文本节点myTextNode添加到新创建的< p >元素里：
myNewPTAGnode . appendChild ( myTextNode ) ;
修正的对象树最后像这样：动态创建一个表格（回到Sample1.html） 回顾HTML表格结构 创建元素节点并把它们添加到文档树
获取body对象（文档对象的第一项）
创建所有的元素
最后，按照上图的表格结构添加每一个字节点下面的源代码是sample1.html的注释
start函数的最后有一行新代码，使用另一个DOM方法setAttribute设置了表格的border属性。setAttribute方法有两个参数：属性名和属性值。你可以使用setAttribute方法设置任何元素的任何属性。
< head > < title > 实例代码 - 使用JavaScript和DOM创建HTML表格 title > < script >
function start () { // 获取body var mybody = document . getElementsByTagName ( " body " )[ 0 ] ; // 创建和元素mytable = document . createElement ( " table " ) ; mytablebody = document . createElement ( " tbody " ) ; //创建所有的单元格 for ( var j = 0 ; j < 2 ; j ++ ) { // 创建一个 元素mycurrent_row = document . createElement ( " tr " ) ; for ( var i = 0 ; i < 2 ; i ++ ) { // 创建一个 元素mycurrent_cell = document . createElement ( " td " ) ; // 创建一个文本节点 currenttext = document . createTextNode ( " 单元格是第 " + j + " 行，第 " + i + " 列 " ) ; // 把创建的文本节点添加到 元素mycurrent_cell . appendChild ( currenttext ) ; // 把 添加到 行mycurrent_row . appendChild ( mycurrent_cell ) ; } // 把行添加到 mytablebody . appendChild ( mycurrent_row ) ; } // 把 添加到 mytable . appendChild ( mytablebody ) ; // 把 添加到 mybody . appendChild ( mytable ) ; // 把mytable的border属性设置为2; mytable . setAttribute ( " border " , " 2 " ) ; }
script > head > < body onload = " start() " > body > html >
使用DOM和CSS处理表格 从表格中获取一个文本节点
如果你的对象是文本节点，你可以使用data属性来获取它的内容
mybody = document . getElementsByTagName ( " body " )[ 0 ] ; mytable = mybody . getElementsByTagName ( " table " )[ 0 ] ; mytablebody = mytable . getElementsByTagName ( " tbody " )[ 0 ] ; myrow = mytablebody . getElementsByTagName ( " tr " )[ 1 ] ; mycel = myrow . getElementsByTagName ( " td " )[ 1 ] ; // mycel的字节点列表的第一项 myceltext = mycel . childNodes [ 0 ] ; // currenttext的内容是myceltext的data currenttext = document . createTextNode ( myceltext . data ) ; mybody . appendChild ( currenttext ) ;
获取一个属性值
mytable . getAttribute ( " border " ) ;
通过改变style属性隐藏列
< html > < body onload = " start() " > body > < script >
function start () { var mybody = document . getElementsByTagName ( " body " )[ 0 ] ; mytable = document . createElement ( " table " ) ; mytablebody = document . createElement ( " tbody " ) ; for ( var j = 0 ; j < 2 ; j ++ ) { mycurrent_row = document . createElement ( " tr " ) ; for ( var i = 0 ; i < 2 ; i ++ ) { mycurrent_cell = document . createElement ( " td " ) ; currenttext = document . createTextNode ( " 单元格是: " + i + j ) ; mycurrent_cell . appendChild ( currenttext ) ; mycurrent_row . appendChild ( mycurrent_cell ) ; // 如果在第0列设置单元格背景色 // 如果在第1列隐藏单元格 if ( i == 0 ) { mycurrent_cell . style . background = " rgb(255,0,0) " ; } else { mycurrent_cell . style . display = " none " ; } } mytablebody . appendChild ( mycurrent_row ) ; } mytable . appendChild ( mytablebody ) ; mybody . appendChild ( mytable ) ; }
阅读(1132) | 评论(0) | 转发(0) |
