DOM 属性とカスタム オブジェクト属性_html/css_WEB-ITnose

DOM ノードにはいくつかのプロパティとオブジェクト プロパティがあり、それらは関連しているため混同されることがありますが、実際には 2 つの異なるものです。 したがって、DOM ノードはカスタム オブジェクト プロパティとメソッドを格納できます。他の Javascript オブジェクトと同様です。

次の例では、オブジェクトが document.body の myData オブジェクト プロパティに割り当てられることを指定します。

カスタム オブジェクトのプロパティとメソッドのみです。これは HTML には影響しません。

同様に、カスタム オブジェクト属性は、出力のために for..in を介してネイティブ オブジェクト属性と混合できます。

カスタム DOM オブジェクト属性:

オブジェクト属性名は大文字と小文字が区別されます。

HTML には影響しません

属性

• DOM ノードは、HTML タグ属性にアクセスするための次の標準メソッドを提供します

• elem.hasAttribute(name) - 属性が存在するかどうかを確認します

elem.getAttribute( name)- 属性の値を取得します

elem.setAttribute(name, value)- 属性を設定します
elem.removeAttribute(name)- 属性を削除します
IE8 および IE8 より小さい互換モードでは、これらの属性の動作は異なります。
getAttribute メソッドと setAttribute メソッドのみが存在します。
これらは実際には属性ではなく DOM オブジェクト属性を変更します。

属性とオブジェクト属性は IE6fdfc9a2881cb9718c022d33438a0c25

7c71a6a3bc03c878ac1c2b3b78954338.

属性作为DOM节点

属性节点同样可以访问,通过elem.attributes集合.

在 attributes   集合中, 每一个属性通过一个特殊的DOM节点呈现. name, value和另外的对象属性.

例如:

<span style="color:blue" id="my">text</span><script>  var span = document.body.children[0]  alert( span.attributes['style'].value )  // "color:blue;"  alert( span.attributes['id'].value )  // "my"</script>

顺便说说, IE<8 和 IE8 兼容模式下, 关于 "style"属性是表现得不一样. 猜猜是为什么?.

属性DOM节点不是document数的一部分, 他们从他们的元素标签中访问.

总结

在DOM模式中,属性和对象属性都是核心的特点.

下面表格中表现了他们的关系和不同:

Properties	Attributes
任何值	String
名称大小写区分	不区分大小写
innerHTML中不会呈现	innerHTML中可见
标准的DOM对象属性和属性是同步的, 自定义的不是.
属性和对象属性在IE<8或者IE8兼容模式下混合使用会导致一些不可预料的结果

如果你想有自定义的属性, 可以通过HTML5中有效的data-*属性来完成. 不明白的可以看HTML5标准.

在实际当中, 98%例子中, DOM对象属性被使用.

两种情况下使用属性:

1. 自定义的HTML属性, 因为DOM对象属性不同步.

2. 去访问一个创建在HTML属性中的, 没有同步的DOM对象, 且确保你需要这个属性. 比如 INPUT的value.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=226 ,欢迎大家传播与分享.