书中提供了一个小的案例来讲述DOM控制页面节点树的方法,我将这个过程比较详细的写了一遍,确实很实用!虽然使用方法比innerHTML繁琐些,但是可以非常精确控制每一个节点的位置,还可以把这个节点做成一个全局变量(这个是我看到这里自己总结的,应该是成立的),以后随时可以调用!
下面内容包括代码,我都是在markdown编辑器下手敲的,目的是为了在这个过程中,能再写一遍代码,对这些代码能加深印象
如果文字敲错了大家就当没看见,代码敲错了我相信能看出来的不会看我这种小白的blog,看不出来复制过去报错的,请留言哈。
createElement方法
createElement方法是在页面中创建一个新的元素,但这个元素是没有父元素的,它只是游荡在这个脚本中,不会被页面显示出来但实际上是存在的。
格式:
document.createElement(nodeName);
例如在一个空的HTML文件中创建一个元素p:
书中讲到,创建了一个元素后把它赋值给一个变量是一个不错的选择,这样方便后续调用:
appendChild方法
这个方法可以把createElement创建的元素插入页面中某个指定的元素节点下,使其成为这个元素的子节点。
格式:parent.appendChild(child);
例子:
上面这个HTML是一个空的ID为testdiv的div,我想将上面创建的那个P元素插入这个div中:
得到的结果是(我在浏览器中F12截图的):
可以看到,这个空的P标签已经成功插入到ID为testdiv的div标签下,成为它的子元素了。但这么写我觉得有点太长了,可以换成下面的写法:
个人觉得这种写法更容易调试代码,灵活性更高些!
切记:
parent.appendChild(child);
中的child
是不带引号的,因为我在上面已经把这个元素存入了一个变量中,我在写的时候就因为这个问题,撒泼打滚的一个字一个字的对着书本的代码查了好半天才反应过来。
当然,我是小白才会因为这种基础的常识问题卡住,大神们请直接忽略!
createTextNode方法
上面讲的使用createElement创建一个空的元素p,并用appendChild插入了指定的div中,现在就可以使用createTextNode来为这个p元素创建内容,创建的形式也是和createElement一样,出来的也是一个浮游的文本元素。
格式:document.createTextNode(text);
例如:
document.createTextNode("This is mt blog!");
//var text = document.createTextNode("This is mt blog!");
//我一般习惯在创建元素的时候马上赋值给一个变量,方便后面使用
文本内容创建好了之后,就可以再使用appendChild方法,插入到p标签下了:
var text = document.createTextNode("This is mt blog!");
para.appendChild(text);
整个过程完整的代码如下:
最终的显示结果如下:
排版需要,我把浏览器放大了,实际上的This is my blog!显示出来是默认的字号和字体!