JavaScript笔记(15)

来做个案例:动态生成表格

这个写的就有点棘手了...很多地方想不到

决定自己再写一遍,然后再贴上来...

ok写完了

先来看看结构,表格的内容不用写

存储数据,因为我们没学数据库,所以就用对象模拟一下:

因为要存多个对象,所以用数组将他们包含起来,用逗号分割.

三种动态创建元素区别

• document.write( )
• element.innerHTML
• document.createElement( )

1. document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则他会导致页面全部重绘
2. innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
3. innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4. createELement创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器下,innerhtml效率要比createElement高

DOM核心

关于DOM操作,我们主要针对于元素的操作.主要有创建/增/删/改/查属性操作,事件操作.

创建

• document.write( )
• innerHTML
• document.createElement( )

增

• node.appendChild(child)
• node.insertBefore(child,指定元素)

删

• node.removeChild(child)

改

主要修改DOM的元素属性,DOM元素的内容,属性,表单的值等

• 修改元素属性: src / href / title等
• 修改普通元素内容: innerHTML / innerText
• 修改表单元素: value / type / disable等
• 修改元素样式: style / className

查

主要获取DOM的元素

• DOM提供的API方法: getElementById,getElementByTagName 古老方法,不推荐
• H5提供的新方法: querySelector, querySelectorAll 提倡
• 利用节点操作获取元素: 父(parentNode), 子(children),兄(previousElementSibling, nextELementSibling) 提倡

属性操作

主要针对于自定义属性

• setAttribute: 设置DOM的属性值
• getAttribute: 得到DOM的属性值
• removeAttribute: 移除属性