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

动态创建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);
}

 

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=’百度’
}
的innerHTML和的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=’’+value+’’;

3）  或者：（不建议）

  ,  然后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代码中没有操作页面元素的语句，则可以将该代码直接写在

 

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）  单独修改控件的样式。技巧，没有文档的情况下的值属性名，随便给一个元素设定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');

//js中元素移除isclicked属性

this.getAttribute('isclicked')

//js中元素获取isclicked属性

 

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

只能通过        this.offsetHeight //仅获取层的高度

 

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

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