javascriptの中のDom操作を理解します。
9034 ワード
DOM（Dcument Object Model）：
結点の概念：全体の文書は階層の異なる複数のノードで構成されており、結点はすべての内容を表していると言える。
結点の種類
1.元素の結点
2.属性の結点
3.テキストの結点
結点の注意点：
1.テキストノードと属性の結点は、要素の結点のサブノードと見なされます。
2.私たちが一般的に言っている結点とは元素の結点であり、これを対象として見て、「結点」と呼びます。
3.結点の関係：親子関係、兄弟関係
1.要素の結点を取得する
1）直接取得
①Dcument.getElemenntById()
②Dcument.getElementsByName()
③Dcument.getElementsByTagName()
2）間接的に取得する
親子の間柄
first Child lastChild child Nodes
子の父の間柄
parent Node
兄弟の間柄
nextSibling previous Sibling
2.操作属性の結点
1）オブジェクト「.」属性で属性を操作します。
優：ユーザーが変更した属性値を動的に取得できます。
欠けています:カスタム属性の値を取得できません。
2）getAttribute（「key」）set Attribute（「key」、「value」）removeAttribute（「key」）
優：カスタム属性の値を取得できます。
欠けています。ユーザーが変更した属性値を動的に取得できません。
3.テキストの結点を処理する
1）対象.innerTextを通じてラベル内部のテキスト情報を取得する
2）ラベル内部のHTMLコードは、オブジェクト.innerHTMLから取得します。
4.DOM構造を動的に変える
1）結点オブジェクトを作成します。
document.creat Element(「ラベル名」)
2）（親の結点）サブ結点オブジェクトの追加
father Node.apendChild（サブノードオブジェクト）
3）（親ノード）結点を指定する前に、サブ結点を追加します。
father Node.insertBefore（新しいノードオブジェクトは、ノードオブジェクトを参照）
4）（親の接合点）古いサブノードのオブジェクトを置換します。
father Node.replacceChild（新規ノードオブジェクト、旧ノードオブジェクト）
5）（親の結点）旧子の結点オブジェクトを削除します。
fahterNode.removeChild（旧ノード対象）
5.要素のCSSスタイルを動的に変える（重要ではない）
1）オブジェクト.style属性操作オブジェクトのcssスタイル：スタイル名に「-」があります。「-」の後の文字を大文字に変更して、スタイルの新しい名前として使用します。
2）私達はクラスを通して一つの対象にクラススタイルを追加したいです。属性名を加えるのはクラスNameです。クラスではなく、クラス（classはjsのキーワードです。属性名として存在することができます。）
1）結点オブジェクトを作成します。
document.creat Element(「ラベル名」)
father Node.apendChild（サブノードオブジェクト）
father Node.insertBefore（新しいノードオブジェクトは、ノードオブジェクトを参照）
father Node.replacceChild（新規ノードオブジェクト、旧ノードオブジェクト）
結点の概念：全体の文書は階層の異なる複数のノードで構成されており、結点はすべての内容を表していると言える。
結点の種類
1.元素の結点
2.属性の結点
3.テキストの結点
結点の注意点：
1.テキストノードと属性の結点は、要素の結点のサブノードと見なされます。
2.私たちが一般的に言っている結点とは元素の結点であり、これを対象として見て、「結点」と呼びます。
3.結点の関係：親子関係、兄弟関係
1.要素の結点を取得する
1）直接取得
①Dcument.getElemenntById()
②Dcument.getElementsByName()
③Dcument.getElementsByTagName()
2）間接的に取得する
親子の間柄
first Child lastChild child Nodes
子の父の間柄
parent Node
兄弟の間柄
nextSibling previous Sibling
2.操作属性の結点
1）オブジェクト「.」属性で属性を操作します。
優：ユーザーが変更した属性値を動的に取得できます。
欠けています:カスタム属性の値を取得できません。
2）getAttribute（「key」）set Attribute（「key」、「value」）removeAttribute（「key」）
優：カスタム属性の値を取得できます。
欠けています。ユーザーが変更した属性値を動的に取得できません。
3.テキストの結点を処理する
1）対象.innerTextを通じてラベル内部のテキスト情報を取得する
2）ラベル内部のHTMLコードは、オブジェクト.innerHTMLから取得します。
4.DOM構造を動的に変える
1）結点オブジェクトを作成します。
document.creat Element(「ラベル名」)
2）（親の結点）サブ結点オブジェクトの追加
father Node.apendChild（サブノードオブジェクト）
3）（親ノード）結点を指定する前に、サブ結点を追加します。
father Node.insertBefore（新しいノードオブジェクトは、ノードオブジェクトを参照）
4）（親の接合点）古いサブノードのオブジェクトを置換します。
father Node.replacceChild（新規ノードオブジェクト、旧ノードオブジェクト）
5）（親の結点）旧子の結点オブジェクトを削除します。
fahterNode.removeChild（旧ノード対象）
5.要素のCSSスタイルを動的に変える（重要ではない）
1）オブジェクト.style属性操作オブジェクトのcssスタイル：スタイル名に「-」があります。「-」の後の文字を大文字に変更して、スタイルの新しい名前として使用します。
2）私達はクラスを通して一つの対象にクラススタイルを追加したいです。属性名を加えるのはクラスNameです。クラスではなく、クラス（classはjsのキーワードです。属性名として存在することができます。）
<script type="application/javascript">
//1.
//1)
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
//
var obj = document.getElementsByName("fav");
console.log(obj)
}
// ③ document.getElementsByTagName()
function getEle3(){
var obj = document.getElementsByTagName("input");
console.log(obj);
}
function getEle4(){
var father = document.getElementById("regForm");
var sons = father.childNodes;
//
console.log(sons[1]);
// firstChild
console.log(father.firstChild);
// lastChild
console.log(father.lastChild);
}
// parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// nextSibling
//previousSibling
function getEle6(){
var bro = document.getElementById("userid");
console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
bro.previousSibling
}
function getField1(){
var obj = document.getElementById("nickid");
//console.log(obj.type);
// password
//obj.type = "password";
var objval = obj.getAttribute("name");
console.log(objval);
obj.setAttribute("abcd","5678");
obj.removeAttribute("type");
//
console.log(obj.value)
//
console.log(obj.getAttribute("value"));
}
// 1) .innerText
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) .innerHTML HTML
function getText2(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML);
}
//
function getText3(){
var myDiv = document.getElementById("myDiv");
myDiv.innerText = "<img src='1.jpg' />";
}
//
function getText4(){
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<img src='1.jpg' />";
}
</script>
</head>
<body>
<button onclick="getEle1();"> 1</button>
<button onclick="getEle2();"> 2</button>
<button onclick="getEle3();"> 3</button>
<button onclick="getEle4();"> 4</button>
<button onclick="getEle5();"> 5</button>
<button onclick="getEle6();"> 6</button>
<hr/>
<button onclick="getField1();"> 1</button>
<hr/>
<button onclick="getText1();"> 1</button>
<button onclick="getText2();"> 2</button>
<button onclick="getText3();"> 3</button>
<button onclick="getText4();"> 4</button>
<hr/>
<form id="regForm">
：<input id="userid" type="text" name="username"><br/>
：<input type="password" name="password"><br/>
：<input id="nickid" type="text" name="nickname" value=" " abcd="1234" ><br/>
： <input type="radio" name="gender" value="nan">
<input type="radio" name="gender" value="nv"><br/>
： <input type="checkbox" name="fav" value="dog">
<input type="checkbox" name="fav" value="cat">
<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value=" ">
</form>
<div id="myDiv"><b>hello</b></div>
</body>
1）結点オブジェクトを作成します。
document.creat Element(「ラベル名」)
<script type="application/javascript">
function changeDom1(){
var ipt=document.createElement("input");
}
</script>
<button onclick="changeDom1();"> </button>father Node.apendChild（サブノードオブジェクト）
function changeDom2() {
var father = document.getElementById("regForm");
var ipt = document.createElement("input");
ipt.type = "text";
father.appendChild(ipt);
}
<button onclick="changeDom2();"> </button>
father Node.insertBefore（新しいノードオブジェクトは、ノードオブジェクトを参照）
function changeDom3() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();"> </button>
father Node.replacceChild（新規ノードオブジェクト、旧ノードオブジェクト）
function changeDom4() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();"> </button>
function changeDom5() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("nickid");
father.removeChild(refChild);
}
<button onclick="changeDom5();"> </button>
<style type="text/css">
.addstyle{
color: red;
font-size: 72px;
text-decoration: underline;
}
</style>
<script type="application/javascript">
/*
5. css
1) .style css ： “-” “-” ， “-”
2) class class ， className， class（class js ， ）
*/
function fontGreater(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv);
myDiv.style.fontSize = "36px";
myDiv.style.fontFamily = " ";
}
function changeFont(){
var myDiv = document.getElementById("myDiv");
myDiv.className = "addstyle";
//myDiv.setAttribute("class","addstyle");
}
</script>
</head>
<body>
<button onclick="fontGreater()"> </button>
<button onclick="changeFont()"> </button>
<div id="myDiv" > ！</div>
</body>