关于Element学习笔记

阅读《javascript高级程序设计》第10章的学习笔记。

要访问元素的标签名 nodeName属性或 tagName属性

<div id = "myDiv"></div>

//js获取元素及标签名
var div = document.getElementById("myDiv");
console.log(div.tagName); //"DIV"
console.log(div.nodeName); //"DIV"

其中要注意的是，HTML中标签名始终以大写表示，而XML有时与源代码中保持一致

HTML元素

每个HTML元素都存在的标准特性

• id 元素在文档中的唯一标识符

• title 有关元素的附加说明信息

• lang 元素内容的语言代码

• dir 语言方向。值为"ltr"【从左至右】| "rtl"【从右至左】

• className 与元素的class特性对应。

获取特性

• getAttribute()
  【注意】传递给getAttribute的特性名与实际特性名相同（不区分大小写）。获取class需传入"class"而不是"className"。可获取自定义特性。通常只有在取得自定义特性值的情况下使用getAttribute()方法。【特殊情况如下】

  • style 通过getAttribute访问时返回的style特性值中包含的是css文本，通过属性访问则会返回一个对象

  • onclick 返回相应代码的字符串 通过属性访问时会返回一个js函数。

---

• setAttribute()
  如果特性已经存在，会以指定值替换现有的值；如果特性不存在，则创建该属性并设置相应值。

【通过这个方法设置的特性名会统一转为小写形式】
【可以直接给属性赋值设置特性的值，具体看下面代码】
【为DOM元素添加一个自定义属性，该属性不会自动成为元素的特性，但自定义属性会在IE中被当作元素特性】

div.setAttribute("id","myId");
div.setAttribute("class","myClass");
//可以直接给属性赋值设置特性的值
div.id="myId";
//
div.mycolor="red";
div.getAttribute("mycolor");//null(IE除外)

---

• removeAttribute()
  用于彻底删除元素特性。不仅会清除特性的值，也会从元素中完全删除特性。

---

创建元素

• document.createElement()只接受一个参数【要创建元素的标签名】

• 将新元素添加到文档树

  • appendChild()

  • insertBefore()

  • replaceChild(0

• 需要注意的问题

  • 不能设置动态创建的<iframe>元素的name特性

  • 不能通过表单的reset方法重设动态创建的<input>元素

  • 动态创建的type特性值为"reset"的<button>元素重设不了表单

  • 动态创建的一批name相同的单选按钮彼此毫无关系。

• 针对上述问题的解决方案：在createElement中指定完整的HTML标签来解决。

  var iframe = document.createElement("<iframe name=\"myframe\"></iframe>");