Python：Day46 Javascript DOM

history对象：

History 对象包含用户（在浏览器窗口中）访问过的 URL。窗口之间是相互独立的。

<input type="button" onclick="history.forward()">
<input type="button" onclick="history.back()">
<input type="button" onclick="history.go()">

location对象：

DOM对象：

（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

HTML 文档中的所有内容都是节点(NODE)：

• 整个文档是一个文档节点(document对象)
• 每个 HTML 元素是元素节点(element 对象)
• HTML 元素内的文本是文本节点(text对象)
• 每个 HTML 属性是属性节点(attribute对象)
• 注释是注释节点(comment对象)

节点(自身)属性:

• attributes - 节点（元素）的属性节点
• nodeType – 节点类型
• nodeValue – 节点值
• nodeName – 节点名称
• innerHTML - 节点（元素）的文本值

<div id="div1">this is div</div>

<script>
    var node = document.getElementById("div1");
    console.log(node.attributes);
    console.log(node.nodeType);      //1
    console.log(node.nodeValue);     //null
    console.log(node.nodeName);    //DIV
    console.log(node.innerHTML);     //this is div
</script>

导航属性:

• parentNode - 节点（元素）的父节点 (推荐)
• firstChild – 节点下第一个子元素
• lastChild – 节点下最后一个子元素
• childNodes - 节点（元素）的子节点 

<div class="div1">
    <div class="div2"></div>
    <p></p>
</div>

<script>
    var div2=document.getElementsByClassName("div2")[0];
    console.log(div2.nextSibling.nodeName)  //text,为什么不是P
</script>

由于此种导航方式是节点导航，而空格或换行也文本节点，所以这个导航中包括文本节点，而这些换行或文本节点并不是我们想要的，所以除了parentNode导航属性外，其它的属性用处不大。

推荐导航属性：

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

查找节点可以通过两种方式：一种是全局查找（页面查找）、第二种是局部查找

全局查找就是通过以下4种方法在整个页面查找：

• 通过使用 getElementById() 方法 
• 通过使用 getElementsByTagName() 方法　　//标签名称，如div、p等 
• 通过使用 getElementsByClassName() 方法 
• 通过使用 getElementsByName() 方法 　　//属性名称

局部查找就是在某个标签下查找：先通过全局查找找到某个标签对象，然后用这个标签对象调用下面方法。

• 通过使用 getElementsByTagName() 方法 
• 通过使用 getElementsByClassName() 方法 

因为id全局唯一，没必要进行局部查找，而Name这种方法，语法不支持。

注意：查找是方法，导航是属性！

Html DOM Event

下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

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

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

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

onselect      文本被选中。
onsubmit      确认按钮被点击。

给元素添加事件属性的两种方法：一种是在标签里面直接加，另一种是在script里面通过属性来加。

<div onclick="func1()">第一种方式！</div>
<p id="abc">第二种方式！</p>

<script>
    function func1() {
        alert(123);
    }

    var ele = document.getElementById("abc");
    ele.onclick=function () {
        alert("你真行！");
    }
</script>

利用Javascript中的DOM进行增删改查：

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀 
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

修改HTML DOM：

1、改变html内容：

<script>
    var ele=document.getElementById("div1");
    var ele1=document.createElement("p");   //通过document的cerateElement创建标签
    ele.appendChild(ele1);  //对拿到div标签添加子标签
    ele1.innerHTML="hello";  //修改html内容，此种方式解释内容中的标签，innerText不解释。
    ele1.setAttribute("id","p1");   //括号里面两个参数都是字符串
</script>

2、改变CSS样式：

<body>
    <div id="div1">1223</div>

<script>
    var ele=document.getElementById("div1");
    ele.style.color="red";  //后面加style，然后再加样式
    alert(ele.getAttribute("id"));  //div1，获取属性值。

3、关于class的属性：

elementNode.classname

elementNode.classlist.add()

elementNode.classlist.remove()

<head>
    <style>
        .bigger{
            font-size: 30px;
            color: red;
        }
        .smaller{
            font-size: 10px;
            color: yellow;
        }
    </style>
</head>
<body>
<div id="div1">这是一个文本；这是一个文本；这是一个文本；这是一个文本；</div>
<input type="button" onclick="change('bigger')" value="变大">     //此处onclick为调用函数，并非定义函数，所以不用function关键字
<input type="button" onclick="change('smaller')" value="变小">

<script>
    function change(a) {
        var ele=document.getElementById("div1");
        ele.classList.add(a);   //因为add后面括号中加的是字符串，所以上面的函数括号中参数也要传字符串，由于双引产生混淆，所以用单引
    }
</script>