ホームページ > 記事 > ウェブフロントエンド > jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説
jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説
- 高洛峰オリジナル
- 2017-01-21 09:26:131268ブラウズ
HTML DOM (Document Object Model) では、各部分がノードです。
ノードは DOM 構造の最も基本的なコンポーネントです。各 HTML タグは DOM 構造のノードです。
Document はドキュメントノードです。
すべての HTML 要素は要素ノードです
すべての HTML 属性は属性ノードです
HTML 要素に挿入されるテキストはテキスト ノードです
コメントはコメント ノードです。
最も基本的なノード タイプは Node タイプです。他のすべてのタイプは Node から継承されます。多くの場合、DOM 操作は js で最もコストがかかる部分であるため、NodeList が最も問題を引き起こします。注: NodeList は「動的」です。つまり、NodeList オブジェクトがアクセスされるたびにクエリが実行されますが、これによりオーバーヘッドが増加しますが、新しく追加されたノードが NodeList に確実にアクセスできるようになります。
すべての要素ノードには共通の属性とメソッドがあります。詳しく見てみましょう:
まず、より一般的に使用される一般的な属性を見てみましょう
1 element.id 要素の ID を設定または返します。
2 element.innerHTML ノード内のサブタグとコンテンツを含めることができる要素のコンテンツを設定または返します。
3 element.innerText サブタグとコンテンツを含まない要素のコンテンツを設定または返しますノード内
4 element.className 要素のクラス名を設定または返します
5 element.nodeName ノードの大文字のラベル名を返します
6 element.nodeType ノードのノード タイプを返します、1 は要素ノードを意味します2 は属性ノードを意味します...
7 要素。nodeValue 要素ノードの値を返します。
8 element.childNodes 要素の子ノードのノードリスト オブジェクトを返します。配列であり、長さ属性を持ちます。角括弧 [index] を使用して、指定したインデックスにアクセスできます (item(index) メソッドを使用することもできます)。ただし、nodelist は配列ではありません。
9 element.firstChild/element.lastChild 要素の最初/最後の子ノード（コメントノードとテキストノードを含む）を返します
10 element.parentNode ノードの親ノードを返します
11 element.previousSibling 同じものを返しますas 現在のノードと同じレベルにある前のノード(コメントノードとテキストノードを含む)
12 element.nextSibling 現在のノードと同じレベルにある次のノード(コメントノードとテキストノードを含む)を返す
13 要素.chileElementCount: 子要素を返します (テキスト ノードとコメント ノードを除く)
14 element.firstElementChild /lastElementChild 最初/最後の子要素を返します (テキスト ノードとコメント ノードを除きます)
15 element.previousElementSibling/nextElementSibling 前/次の兄弟要素 (テキスト ノードと注釈ノードを除く)
16 element.clientHeight/clientWidth コンテンツの視覚的な高さ/幅を返します (境界線、マージン、またはスクロール バーを除く)
17 element.offsetHeight/offsetWidth /offsetLeft /offset/ Top 親要素を基準とした要素の高さ/幅/左オフセット/右オフセットを返します(ボーダーとパディングを含み、マージンを除く)
18 element.style 要素のスタイル属性を設定または返します。例: element.style.backgroundColor CSS とは異なり、style 属性では水平バーを削除する必要があり、2 番目の単語の最初の文字を大文字にする必要があることに注意してください
19 element.tagName 要素のタグ名 (大文字) を返します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px solid rebeccapurple;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' name="cangjingge" >
请选择功法：<br/>
<input type="radio" name="gongfa" value="jysg">九阳神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
</form>
<p>少侠请三思！！！</p><!--注释标签-->
<p>推荐功法-->葵花宝典</p>
<script>
//js演示代码请添加至此
var a=document.getElementById('first_form'),
b = document.getElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.log(a.nodeName);
console.log(a.nodeType);
console.log(a.nodeValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>
</body>
</html>ブラウザに結果が表示されます:
いくつかの排他的な属性もあります
排他的な属性とは、特定のラベルに排他的な属性を指します。たとえば、 タグには href 属性と target 属性があります。 には src 属性があり、
a_element.href より一般的に使用される一般的なメソッドを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' name="cangjingge" >
请选择功法：<br/>
<input type="radio" name="gongfa" value="jysg">九阳神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
</form>
<p>少侠请三思！！！</p>
<script>
//js演示代码请添加至此
</script>
</body>
</html>(以下のすべての js デモ コードは、実験オブジェクトとしてこのドキュメントのサンプル HTML コードに基づいています)
1 element.appendChild(nodeName) 新しい子ノードを要素に最後の子ノードとして追加し、戻ります子ノード。新しい要素を HTML DOM に追加するには、まず要素を作成し、それを既存の要素に追加する必要があります。
js デモコード:
var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重选择");
a.appendChild(textnode)
2 element.getAttribute(para) 要素ノードの指定された属性値を返します。
js デモ コード:
var a=document.getElementById('first_form'); console.log(a.getAttribute('name')) //控制台输出name的值
3 element.getAttributeNode(para) 指定された属性ノードを返します。
js デモ コード:
var a=document.getElementById('first_form'); console.log(a.getAttributeNode('name')) //控制台输出name属性节点
4 element.getElementsByTagName(para) 指定されたタグ名を持つすべての子要素のコレクションを返します。
js デモコード:
var a=document.getElementById('first_form'); console.log(a.getElementsByTagName('input')) //控制台输出
5 element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。
js演示代码：
var a=document.getElementById('first_form'); console.log(a.hasAttribute('name')) //控制台输出
6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。
js演示代码：
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天马流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);
7 element.removeAttribute() 从元素中移除指定属性。
js示例代码：
var a=document.getElementById('first_form'); a.removeAttribute('name'); console.log(a.hasAttribute('name'))
8 element.removeChild() 从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。
js示例代码：
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3]);
9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。
10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。
js示例代码：
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)
11 element.setAttributeNode() 修改指定属性节点
js示例代码：
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)
12 nodelist.item() 返回 NodeList 中位于指定下标的节点。
js示例代码：
var a=document.getElementsByTagName('input') console.log(a.item(2))
以上就是小编为大家带来的jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説全部内容了，希望大家多多支持PHP中文网~
更多jsベースのDOMにおける要素オブジェクトの属性メソッドを詳しく解説相关文章请关注PHP中文网！