ディレクトリ

GOOD

BOM（ブラウザのオブジェクトモデルは）にはJavaScript対応ブラウザが可能ブラウザオブジェクトモデルを指し、「話。」

1.ウィンドウオブジェクト

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的打开的页面)

ウィンドウの子オブジェクト

navigatorオブジェクト

navigator.appName　　// Web浏览器全称  "Netscape"
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

画面オブジェクト

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

履歴オブジェクト

history.forward()  
// 前进一页，其实也是window的属性,window.history.forward()
history.back()  // 后退一页

位置オブジェクト（***）

window.locationのオブジェクトは、現在のページのアドレス（URL）を取得するために使用され、ブラウザが新しいページにリダイレクトされます。

location.href  获取当前页面的地址(URL)
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面

2.ポップアップボックス

警告ボックス、チェックボックス、メッセージボックス：スリーは、JavaScriptのメッセージボックスに作成することができます。

アラートボックス

　アラートボックスは、多くの場合、ユーザーはいくつかの情報を得ることができることを確実にするために使用されます。

　　　警告ボックスが表示されたら、ユーザーは続行するために[OK]ボタンをクリックする必要があります。

alert('看到了吗？');

確認ボックス

特定の情報を確認したり、受信するユーザーのためのボックスをチェックします。

確認ボックスが表示されたら、ユーザーは続行するために、ボタンをOK]または[キャンセル]をクリックする必要があります。

ユーザーが確認するためにクリックした場合、戻り値はtrueです。ユーザーが[キャンセル]をクリックした場合、戻り値はfalseです。

confirm("你确定吗？")

この値に基づいて、対応するWebサイトにジャンプする場所を使用しているもの、を決定するために、trueまたはfalseを返すことができます。

<script>
    // alert('看到了吗？');
    b = confirm('你确定吗？');
    if (b){
        location.href='http://www.baidu.com'
    }else{
        window.close()
    }
</script>

ヒントボックス

プロンプトボックスは、多くの場合、ページに入る前に入力する値をユーザーに促すために使用されています。

プロンプトボックスが表示されたら、ユーザーは、操作を継続するには、[OK]をクリックするか、[キャンセル]ボタンを、値を入力する必要があります。

ユーザーが確認するためにクリックした場合、戻り値は入力されます。ユーザーが入力していない場合はOK、デフォルトの値を返すことは二番目の引数であるデフォルト値がない場合、返されます「」ヌルを返すために、[キャンセル]をクリックします

prompt("请在下方输入","你的答案")

3.タイマー（***）

setTimeoutメソッド：一定期間の後に何かをします

语法：
var t=setTimeout("JS语句",毫秒)  第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）

var a = setTimeout(function f(){
    confirm('确定吗？');},3000);        
    // function不用引号，3000是毫秒。 3s后执行函数。

clearTimeout（）：のsetTimeoutをキャンセルするように設定

语法：
clearTimeout(setTimeout_variable)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
clearTimeout(timer);        // 取消setTimeout设置

setInterval（）：たまにで何かをします

呼出関数または演算式に（ミリ秒単位で）指定された期間に従ってたsetInterval（）メソッド。

setInterval（）メソッドは、（）てclearIntervalまで、関数を呼び出すしていきますと呼ばれる、またはウィンドウが閉じられています。パラメータ値がてclearInterval（）メソッドを返すようにしたsetInterval（）IDが使用されます。

语法：
setInterval("JS语句",时间间隔);

clearInterval（）：のsetIntervalをキャンセルするように設定

clearInterval（）メソッドは、タイムアウトのsetInterval（）のセットを取り消します。

clearIntervalパラメータは、（）メソッドのsetInterval（）リターンのID値でなければなりません。

语法：
clearInterval(setinterval返回的ID值)

例：

var a = setInterval(function f1(){
    confirm("are you ok?");},3000);
clearInterval(a);

JUDGMENT

DOM（ドキュメントオブジェクトモデル）は、文書や抽象概念の内容のためのメソッドのセットです。

ページがロードされると、ブラウザは、ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル）のページを作成します。

HTML DOMモデルは、オブジェクトツリーとして構成されています。

1. HTML DOMツリー

DOM標準は、HTML文書の各構成要素はノード（ノード）であることを指定します。

Documentノード（ドキュメントオブジェクト）：文書全体を代表して
要素ノード（要素オブジェクトは）：要素（タグ）を表します
ノードのテキスト（テキストオブジェクト）：テキスト内の代表的要素（タグ）
ノード属性（属性オブジェクト）：属性要素（タグ）を表す特性を有します
コメントはコメントノード（コメントオブジェクト）です

JavaScriptはDOMを通じてダイナミックHTMLを作成することができます。

JavaScriptは、ページ上のすべてのHTML要素を変更することができます
JavaScriptは、すべてのHTMLページのプロパティを変更することができます
JavaScriptは、すべてのCSSスタイルのページを変更することができます
JavaScriptは、すべてのイベントページ用（マウスクリック、マウスの移動イベント、など）を反応させることができます

2.検索ラベル

document.getElementById('id的值');    // 根据id获取一个标签
document.getElementsByClassName('类的值');   //根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName('标签名');     //根据标签名获取标签合集

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1" id="d1">这是div1标签
    <span id="s1">span1标签</span>
    <span id="s2">span2标签</span>
    <span id="s3">span3标签</span>
</div>

<div class="c2 cc2" id="d2">这是div2标签</div>
</body>
</html>

操作：
var divEle = document.getElementById('d1');
var divEle = document.getElementsByClassName('c1');
var divEle = document.getElementsByTagName('div');

3.間接検索

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

示例：
var divEle = document.getElementById('d1');
divEle.parentElement;   // body标签
divEle.children;    // 所有的子标签
divEle.firstElementChild; //第一个子标签
divEle.lastElementChild;
divEle.nextElementSibling;

4.ノードの操作

ラベルを作成:(ノードを作成します）

構文：

　　createElement（名札）

var aEle = document.createElement("a");

ノードの追加

構文：

　　子ノードを追加（最後として、子ノード）

　　　　somenode.appendChild（newnode）。

　　追加されたノードは、ノードの前に置か。

　　　　somenode.insertBefore（newnode、ノード）。

示例：
var divEle = document.getElementById('d1');
var aEle = document.createElement("a"); //创建a标签
divEle.appendChild(aEle);   // 添加到div最后

var spanEle = document.getElementById("s2"); 
var pEle = document.createElement("p"); //创建p标签
divEle.insertBefore(pEle,spanEle);  // 添加到div中span2前

ノードを削除します。

構文：

　　親要素を呼び出すことによって、あなたは、削除方法を削除したい要素を取得します。

　　somenode.removeChild（削除するノード）

示例：
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);  //删除span2标签

ノードを交換してください：

構文：

　　somenode.replaceChild（newnode、ノード）。

　　somenodeは、親のラベルで、その後、サブタブに置き換える必要があり、親のラベルを見つけ、その後、サブタグを置き換えるために新しいラベルを使用します

示例：
var divEle = document.getElementById('d1');
var div3 = document.createElement("div");
var span2 = document.getElementById('s2');
divEle.replaceChild(div3,span2);    // 替换span2

ノード属性：

テキストノードの値を取得します。

var divEle = document.getElementById("d1")
divEle.innerText  //获取该标签和内部所有标签的文本内容
divEle.innerHTML //获取的是该标签内的所有内容，包括文本和标签

テキストノードの値

var divEle = document.getElementById("d1")
divEle.innerText="1";   // div中只要一个1，不能够识别标签
divEle.innerHTML="<a href=''>百度</a>" // 能识别标签

ラベルを作成し、値を設定します。

var dEle = document.createElement("div");
dEle.innerHTML = '这是div2';

属性の操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  // 比较规范的写法 给div标签增加age="18"的属性
divEle.getAttribute("age")      // 查看
divEle.removeAttribute("age")   // 删除

自带的属性：
aEle.href;      // 查看href属性的值
aEle.href = 'xxx';  // 修改href属性的值

示例：
<a href="http://www.baidu.com">百度</a>
操作
var a = document.getElementsByTagName('a');
a[0].href;  //获取值
a[0].href = 'xxx'; //设置值

操作の値を取得します：

これは、入力、選択、textareaタグに適用されます。

構文：

　　elementNode.value

input输入框
inpEle.value;       // 获取input标签输入的值
inpEle.value = 'xxx';   // 修改input标签输入的值

示例：
<div>
    用户名：<input type="text" name="username" id="username">
</div>
操作：
var inpEle = document.getElementById('username');
inpEle.value;   //获取输入框中输入的内容
inpEle.value = "SD"; // 设置输入框中的值为SD

select下拉框

selEle.value;   // 获取select标签中value的值
selEle.value='1';   // 设置select标签中value的值

示例：
<select name="city" id="select1">
        <option value="1">广东</option>
        <option value="2">惠州</option>
        <option value="3">东莞</option>
</select>
操作：
var selEle = document.getElementById('select1');
selEle.value;   // "2"

クラスアクション

获取标签对象
标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

classList.contains(cls)  判断类值是否存在，存在返回true

示例：动图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 cc" id="d"></div>
</body>
</html>

操作：
var dEle = document.getElementById("d");
var a = setInterval(function f(){dEle.classList.toggle("c2");},30);
clearInterval(a)

CSSの設定操作

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。
obj.style.backgroundColor
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

示例：
设置值:
    divEle.style.backgroundColor = 'yellow';
获取值
    divEle.style.backgroundColor;

イベント

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

結合事象の方法：

先找标签divEle
divEle.onclick = function (){
    divEle.style.backgroundColor = 'pink';
}       //左键捕获、触发

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 " id="d"></div>
    <script>
        var dEle = document.getElementById("d");
        dEle.onclick = function f() {
            //dEle.style.backgroundColor = 'pink';
            this.style.backgroundColor = 'pink';
        }
    </script>
</body>
</html>
// 鼠标一点击会变颜色

結合事象の道：

在标签中添加 onclick = f() 属性
然后在 js中定义f()函数。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 " id="d" onclick="f()"></div>
    <script>
        function f() {
            var dEle = document.getElementById("d");
            dEle.style.backgroundColor = 'pink';
            
        }
    </script>
</body>
</html>

現在の動作のタグを取得します

属性中：onclick = f(this)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 " id="d" onclick="f(this);"></div>
    <script>
        function f(th){
            th.style.backgroundColor='purple';
            }
    </script>

</body>
</html>

51遠位--BOM / DOM