04——javascript Dom 动态创建元素操作样式

创建时间：2016-11-08 投稿人：浏览次数：1483

动态创建DOM

1） document.write只能在页面加载过程才能动态创建

可以调用document的createElement(‘标签名’)方法来创建具有指定标签的DOM对象，然后通过某个元素的appendChild(node);方法将创建的元素添加到相应的元素下。
父元素对象.removeChild(node)(子元素对象);删除元素。
父元素对象.insertBefore（node NewChild,node refChild）,在父元素对象把NewChild插到refChild前面，replaceChild（node new,nodeold）替换
functionshowIt(){
    vardivMain=document.getElementById(‘divMain’);
    varbtn=document.createElement(“input”);
    btn.type=”button”
    btn.value=”我是动态的”;
    divMain.appendChild(btn);
}
<div id=”divMain”></div>
<input type=”button” value=”ok” onclick=”showIt()”/>

innerText（兼容IE，不兼容FF）和innerHTML（兼容所有的浏览器）

1）几乎所有的DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内容的文本表示形式和HTML源码，这两个属性是可读可写的。//FF不支持innerText，在FF下用textContent属性。也可以用innerHTML 设置普通文本。//编写兼容的innerText

2）示例：innerText和innerHTML区别

3）用innerHTML也可以代替createElement,属于简单、粗放型、后果自负的创建。

4）示例
function createLink(){
var divMain=document.getElementById(‘divMain’);
divMain.innerHTML=’<ahref=”baidu.com”>百度</a>’
}
<span/>的innerHTML和<span></span>的innerHTML不一样。//建议：在使用之前要保证标签具有开始和结束标记，否则，会出现一些意想不到的后果

5）（*）通过能力检测，写一个可以兼容FF与IE使用innerText与textContent的代码

if(typeof(Dom对象.innerHTML)==’string’)｛
Dom对象.innerHTML=’ ’；
｝elseif(typeof(Dom对象.textContent)==’string’)｛
Dom对象.textContent=’ ‘
｝

浏览器兼容性问题

1）浏览器兼容性的例子：ie6,ie7对table.appendChild(“tr”)的支持和ie8不一样，用insertCell、insertRow来代替或者为表格添加tbody,然后向tbody中添加tr。FF不支持innerText

2）所以动态加载网站列表程序修改为：

var trObj=document.getElementByTagName("table")[0];
var tr=trObj.insertRow(-1); //向表格加入一行(tr),FF必须加-1这个参数，表追加。如果不是负数，则表示在某个索引之前插入。
var td1 =tr.insertCell(-1); //向tr中插入一列(td)
td1.innerText=key;
var td2=tr.insertCell(-1);
td2.innerHTML=’<a href=”’+value+’”>’+value+’</a>’;

3）或者：（不建议）
<table id=”tableLinks”>
<tbody></tbody>
</table> , 然后trObj.tBodies[0].appendChild(tr);-

InnerHTML还是操作DOM节点

1）操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChile()与removeChild()的方式
1. 对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的DOM操作（有专门用C或C++写的html解析器）.先将页面的HTML代码写好，然后调用一次innerHTML,而不是反复调用innerHTML
2. 对于使用innerHTML=‘’的方式来删除节点，在某些情况下会存在内存问题。比如：div下面有很多其它元素，每个元素都会绑定事件处理程序。此时，innerHTML只是把当前元素从节点树上移除，但是那些事件处理程序依然占用内存。

代码是否需要放置到onload中

1 如果js代码是否需要操作页面上的元素，则将该代码放到onload里面，因为当页面加载完毕之后页面上·才会有相关元素

2 如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中，

例如：声明变量，相加求和等操作

<body>

<!—html标签-->

//写在这是的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里也可以操作页面上的元素

//建议将操作页面元素的代码都放到onload里面

</script>

</body>

Js操作页面样式，其他

1）易错：修改元素的样式不是设置class属性，而是className属性。（class是javascript的一个保留字，属性不能用关键字，保留字所以就变成className了）

2）修改元素的样式不能this.style=”background-color:red”。

3）易错：单独修改样式的属性使用“style.属性名”。注意在css属性名在javaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript则是style.backgroundColor;元素样式名是class，在JavaScript中是className属性;
front-size -> style.fontSize; margin-top -> style.margin Top//驼峰命名法

4）单独修改控件的样式<inputtype=”button” value=”AAA” onclick=”this.style.color=’red’”/>。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性

5）操作float样式的时候，IE与其他浏览器不太一样。IE：　obj.style..styleFloat=’right’;其他浏览器：obj.style.cssFloat=’right’;

6） .onfocus = function ()//获得焦点事件，鼠标点击 .onblur = function ()//失去焦点事件

7） .onmouseover = function ()//鼠标悬浮事件 .onmouseout = function ()//鼠标离开事件

04——javascript Dom 动态创建元素 操作样式

04——javascript Dom 动态创建元素操作样式