ディレクトリ
第IV章、BOMおよびDOMのフロント
まず、BOMおよびDOMを説明
BOM（ブラウザのオブジェクトモデルは）にはJavaScript対応ブラウザが可能ブラウザオブジェクトモデルを指し、「話。」
DOM（ドキュメントオブジェクトモデル）を使用すると、HTMLドキュメントのすべての要素にアクセスするためのドキュメントオブジェクトモデルを指します。
二、ウィンドウオブジェクト
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口三、ウィンドウのサブオブジェクト
navigator对象
sreen对象
history对象
location对象第四に、ポップアップボックス
警告框：alert()
确认框: confirm() 返回true和false
提示框 ：prompt() 返回输入的值第五に、タイミング関連
setTimeout("js代码",毫秒) 返回某个值 过了一段时间执行
clearTimesetT(setTimeout返回的值)
setInterval("js代码",毫秒) 每隔一段时间执行js语句，返回的是ID值，该值可用作 clearInterval() 方法的参数。
clearInterval(setinterval返回的ID值) 方法可取消由 setInterval() 设置的 timeout。PS：上記はBOM以下、DOMです
六、HTML DOMツリー
説明： DOM標準は、HTML文書の各構成要素はノード（ノード）であることを指定します。
- Documentノード（ドキュメントオブジェクト）：文書全体を代表して
- 要素ノード（要素オブジェクトは）：要素（タグ）を表します
- ノードのテキスト（テキストオブジェクト）：テキスト内の代表的要素（タグ）
- ノード属性（属性オブジェクト）：属性要素（タグ）を表す特性を有します
- コメントはコメントノード（コメントオブジェクト）です
説明：JavaScriptはDOMを通じてダイナミックHTMLを作成することができます。
- JavaScriptは、ページ上のすべてのHTML要素を変更することができます
- JavaScriptは、すべてのHTMLページのプロパティを変更することができます
- JavaScriptは、すべてのCSSスタイルのページを変更することができます
- JavaScriptは、すべてのイベントページに反応することができます
七、要素を見つけます
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
间接查找：
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素八個のノード操作
创建节点
createElement(标签名)1.html
<!--创建一个新的<div>并且插入到ID为“div1”的元素前。-->
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<body>
<div id="div1">The text above has been created dynamically.</div>
</body>
</html>在控制台上输入
document.body.onload = addElement;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
addElement()
結果は以下の通りであります
html文本
<html><head>
<title>||Working with elements||</title>
</head>
<body>
<div>Hi there and greetings!</div>
<div>Hi there and greetings!</div><div id="div1">The text above has been created dynamically.</div>
</body></html>
显示效果：
Hi there and greetings!
The text above has been created dynamically.添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
-------------------------------------------
实例：
document.getElementById("myList").insertBefore(newItem,existingItem);替换节点：
somenode.replaceChild(newnode, 某个节点);属性节点
获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."获取值操作
节点对象.value
适用于以下标签：
.input
.select
.textarea
------------------------------
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类 classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加指定CSS操作
obj.style.backgroundColor="red"九、JS CSS財産法の操作
CSSプロパティの一般的なスタイルの水平線で直接使用されていません。属性名。以下のような：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
水平線の後の最初の文字を含む水平線のCSSプロパティは大文字行うことができます。以下のような：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
テン、イベント
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。結合方法
方法1：彼は良い機能を指定する際のラベルを定義します
<div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(this) { ths.style.backgroundColor="green"; } </script>注意：
これは、イベントをトリガし、現在の要素である引数です。
パラメータとしてTHS中の関数定義。
第二の方法：定義されたタグは、オブジェクトのプロパティ関数の実施形態を特定した後、
<div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script>
X.ケース
タイマー：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
var t;
function showTime() {
var i1Ele = document.getElementById('i1');
var time = new Date();
i1Ele.value = time.toLocaleString();
}
showTime();
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function (ev) {
if (!t){
t = setInterval(showTime,1000)
}
};
var b2Ele = document.getElementById('b2');
b2Ele.onclick = function (ev) {
clearInterval(t);
t = undefined
};
</script>
</body>
</html>関連する知識：タイミング関連の機能、のonclickイベントがトリガされ、要素を見つけ、Dateオブジェクトを使用して、入力ラベル
検索ボックス
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框示例</title>
</head>
<body>
<input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
<script>
function focus(){
var inputEle=document.getElementById("d1");
if (inputEle.value==="请输入关键字"){
inputEle.value="";
}
}
function blur(){
var inputEle=document.getElementById("d1");
var val=inputEle.value;
if(!val.trim()){
inputEle.value="请输入关键字";
}
}
</script>
</body>
</html>知識に関連する：プロパティとonblur、ONFOCUS、要素を見つけ、プロパティ値のメソッドを取得します。