首页 > 代码库 > Dom编程(二)

Dom编程(二)

  document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document
  document的方法:
 (1)write:向文档中写入内容。writeln,和write差不多,只不过最后添加一个回车
  <input type="button" value="http://www.mamicode.com/点击" onclick="document.write(‘<font color=red>你好</font>‘)" />
  在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
  <script type="text/javascript">
    document.write(‘<font color=red>你好</font>‘);
  </script>
  write经常在广告代码、整合资源代码中被使用。
  内容联盟、广告代码、cnzz,不需要被主页面的站长去维护内容,只要被嵌入的js内容提供商修改内容,显示的内容就变了。
  getElementById方法(非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、form1.textbox1之类的问题,因此不建议直接通过id操作元素,而是通过getElementById
  (*)getElementsByName,根据元素的name获得对象,由于页面中元素的name可以重复,比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组。
  (*)getElementsByTagName,获得指定标签名称的元素数组,比如getElementsByTagName("p")可以获得所有的<p>标签。

  document.write只能在页面加载过程中才能动态创建。
  可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下

 Value 获取表单元素
 几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。用 innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建
  function createlink() {
  var divMain = document.getElementById("divMain");
  divMain.innerHTML = "<a href=http://www.mamicode.com/‘http://www.rupeng.com‘>如鹏网";
  }
  浏览器兼容性的例子:ie6,ie7对table.appendChild("tr")的支持和IE8不一样,用insertRow、insertCell来代替或者为表格添加tbody,然后向tbody中添加tr。FF不支持InnerText。<table id="tableLinks"><tbody></tbody></table>,然后tableLinks.tBodies[0].appendChild(tr)。
  事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发。触发的顺序是“由内而外”
  事件中的this。除了可以使用event.srcElement在事件响应函数中,this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用,如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的,this就是表示当前监听事件的这个对象,event.srcElement是引发事件的对象:事件冒泡。

 修改样式
  易错:修改元素的样式不是设置class属性,而是className属性。修改元素的样式不能this.style="background-color:Red"。
  易错:单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color,而JavaScript则是style.backgroundColor;元素样式名是class,在JavaScript中是className属性;font-size→style.fontSize;margin-top→style.marginTop
  单独修改控件的样式<input type="button" value="http://www.mamicode.com/AAA" onclick="this.style.color=‘red‘" />。技巧,没有文档的情况下的值属性名,随便给一个元素设定id,然后在js中就能id.style.出来能用的属性。
  控制层的显示:修改style.display

Dom编程(二)