您的位置：首页 > Web前端 > JavaScript

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

2016-11-08 20:31 621 查看

动态创建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标签-->

<script type=”text/javascript”>

         //写在这是的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到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 ()//鼠标离开事件

相关的css设置

cursor:pointer;
/*鼠标指示变为小手，这里是用在css中*/

this.setAttribute('isclicked',
'true');
//js中元素添加一个值为'true'的isclicked属性
this.removeAttribute('isclicked');
4000

//js中元素移除isclicked属性
this.getAttribute('isclicked')
//js中元素获取isclicked属性

Html元素的属性是获取不到style中的属性值：只有通过style属性设置的层的高度才能通过style属性获取层的高度，如果不是通过style属性设置的层的高度，那么无法通过style属性获层的高度
只能通过        this.offsetHeight //仅获取层的高度

this.style.overflow =
'hidden';//设置当层中的元素溢出以后，把溢出的内容隐藏掉

——采自传智播客的教学笔记(手打难免有错)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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