FrontEnd-Basis-7th

周五，阴，记录生活分享点滴

参考博客：https://www.cnblogs.com/yuanchenqi/articles/5980312.html

JavaScript 3

DOM对象(DHTML)

DOM 节点

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

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

节点(自身)属性：

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

导航属性：

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

推荐导航属性：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <div>hello div </div>
    <p>hello p</p>
</div>

<script>

// firstElementChild - 第一个子标签元素 ------------------------------------------
    var ele=document.getElementById("div1");
    var ele_son=ele.firstElementChild;    // 第一个子标签元素
    alert(ele_son.nodeName)  // DIV

// lastElementChild - 最后一个子标签元素 -----------------------------------------
    var ele=document.getElementById("div1");
    var ele_son=ele.lastElementChild;     // 最后一个子标签元素
    alert(ele_son.nodeName);              // P

// children - 所有子标签 --------------------------------------------------------
    var ele=document.getElementById("div1");
    var ele_sons=ele.children;            // 所有子标签
    alert(ele_sons.length);               // 2
    alert(ele_sons[0]);                   // [object HTMLDivElement]
    for (var i=0;i<ele_sons.length;i++){  // 通过for循环查看所有子标签
        console.log(ele_sons[i])          // <div>hello div </div> 和 <p>hello p</p>
    }

// nextElementtSibling - 下一个兄弟标签元素 --------------------------------------
    var ele=document.getElementById("div1").firstElementChild;
    var sib=ele.nextElementSibling;       // 下一个兄弟标签元素
    alert(sib.nodeName);                  // P


// 这些属性是为了对文档树进行导航

</script>
</body>
</html>

查找对象方式

全局查找

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
通过使用 getElementsByName() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">hello
    <div class="div2">hello 2</div>
    <div class="div3" name="chung">hello 3</div>
    <p>hello p</p>
</div>

<script>

    // 通过ID ID特性：唯一性 -----------------------------------------------------------
    var temp=document.getElementById("div1");

    // 通过ClassName 有可能是多个，数组的格式 --------------------------------------------
    var ele=document.getElementsByClassName("div2")[0];  // 通过[0]取一个值
    var ele2=ele.nextElementSibling;
    alert(ele2.innerHTML);                               // hello 3

    // 通过TagName ---------------------------------------------------------------------
    var tag=document.getElementsByTagName("p");
    alert(tag[0].innerHTML)                              // hello p

    // 通过Name -------------------------------------------------------------------------
    var Name=document.getElementsByName("chung");
    for(var i in Name){
    console.log(Name[i].innerHTML)                       // hello 3
    }

</script>

</body>
</html>

局部查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">

    <div class="div2">i am div2</div>
    <div name="chung">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

// 支持 TagName ----------------------------------------------------------
   var ele= div1.getElementsByTagName("p");
   alert(ele.length);    // 1

// 支持 ClassName --------------------------------------------------------
    var ele2=div1.getElementsByClassName("div2");
    alert(ele2.length);  // 1

// 不支持 Id --------------------------------------------------------------
    var ele3=div1.getElementById("div3");
    alert(ele3.length);

// 不支持 Name ------------------------------------------------------------
    var ele4=div1.getElementsByName("chung");
    alert(ele4.length)

</script>
</body>
</html>

HTML DOM Event(事件)

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

onfocus        元素获得焦点。
onblur         元素失去焦点。              应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证。

onchange       域的内容被改变。            应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。         应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开。

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

event 对象 & 输入框练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 鼠标双击ppppp反馈123 ------------------------------------------------------------------------>
    <p ondblclick="alert(123)">ppppp</p>

    <!-- 输入框练习 --------------------------------------------------------------------------------->
    <input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名">
    <!-- onfocus元素获得焦点；onblur元素失去焦点 -->
    
<script>
    
    function func1() {
        var ky=document.getElementsByClassName("keyword")[0];
        ky.value="";
    }
    function func2() {
        var ky=document.getElementsByClassName("keyword")[0];
        if (ky.value.trim().length==0){
            ky.value="请输入用户名";
        }
    }
    
</script>
</body>
</html>

onchange·多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select  onchange="fun3()">
    <option>上海</option>
    <option>北京</option>
    <option>河北</option>
</select>

<script>
    function fun3() {
        alert(1234);
    }
</script>


</body>
</html>

onkeydown & onkeyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2(event)" >
    <!-- onkeydown某个键盘按键被按下；onkeyup某个键盘按键被松开 -->

<script>
    function fun1(e) {
        console.log(456);
    }
    function fun2() {
        console.log(123)
    }
</script>
    
</body>
</html>

onload

<!--onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <script>
        function fun1() {
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }
        
        window.onload=function () {               /* onload 一张页面或一幅图像完成加载 */
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }
    </script>

<p id="id1">hello p</p>

</body>
</html>

onmousedown & onmousemove & onmouseout & onmouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            background-color: #84a42b;
            width: 200px;
        }
    </style>
</head>
<body>

    <div onmousedown="down()" onmousemove="move()" >div1</div>
    <!--
    onmousedown    鼠标按钮被按下
    onmousemove    鼠标被移动
    onmouseout     鼠标从某元素移开
    onmouseover    鼠标移到某元素之上
    -->
    
<script>
    function down() {
        console.log("down");
    }
    function move() {
    console.log("move");
    }
    function out() {
        console.log("out");
    }
    function over() {
        console.log("over");
    }
</script>
    
</body>
</html>

onsubmit

绑定事件的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="div1" onclick="func1()">hello duv
        <p class="ppp">hello p</p>
    </div>

    <script>
        
        /* 第一种：找到标签对象 --------------------------------------------*/
        var obj=document.getElementsByClassName("ppp")[0];
        obj.onclick=function () {
            alert(123);
        }
        
        /* 第二种：直接在标签后加属性 ---------------------------------------*/
        function func1(){
            alert("func1")
        }
        
    </script>

</body>
</html>

验证方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="form" onsubmit="return check()">
    <input type="text" name="username">
    <input type="submit" value="submit">
</form>

<script>
// 第一种方式 ----------------------------------------------------------------------------------------
    function check(event) {
        alert("验证失败！");
        return false;  //返回true没有问题，如果返回false，需要注意onsubmit="return check()"有return
// 第二种方式 ----------------------------------------------------------------------------------------
        // event.preventDefault() 用这句话替代 return false ，表示组织标签默认行为
    }
    
</script>
</body>
</html>

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 300px;
            height: 200px;
            background-color: #84a42b;
        }
        #div2{
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div id="div1" onclick="alert('div1')">
    <div id="div2" onclick="func1(event)"></div>
</div>

<script>
    function func1(e) {
        alert('div2');
        e.stopPropagation();  // 阻止事件向外层div传播
    }
</script>

</body>
</html>

增删改查

node的CURD

增

createElement(name)创建元素
appendChild();将元素添加

删

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

改

// 第一种方式:
使用上面增和删结合完成修改

// 第二种方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容

示例

参考博客：https://blog.csdn.net/mrlin6688/article/details/50988958

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的增删改查</title>
<!--加入样式表--------------------------------------------------------->
<style type="text/css">
div {
    border:#0099FF 1px solid;
    height:60px;
    width:120px;
    margin:20px 0px 20px 20px;
    padding:10px 0px 0px 20px;
    }

#div_1{
    background-color:#00FFFF;
    }

#div_2{
    background-color:#FF3399;
    }

#div_3{
    background-color:#0000FF;
    }

#div_4{
    background-color:#FFFF66;
    }
</style>
</head>

<body>
    <div id="div_1"></div>
    <div id="div_2">div区域2</div>
    <div id="div_3">div区域3</div>
    <div id="div_4">div区域4</div>
    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />
</body>

<script type="text/javascript">
//动态为div增加一个a元素,点击之后跳转到博客园首页
function addNode(){
    //1.创建a元素 <a></a>
    var aEle = document.createElement("a");
    //2.为a元素添加属性
    aEle.setAttribute("href", "http://www.cnblogs.com");
    //3.为a元素添加文本
    aEle.innerHTML = "博客园";
    //4.获得目标div
    var div_1 = document.getElementById("div_1");
    //5.添加
    div_1.appendChild(aEle);
}
//把div_2删除
function deleteNode(){
    //1 获得要删除的元素
    var div_2 = document.getElementById("div_2");
    //2 找到该元素的父亲
    var parent= div_2.parentNode;
    //3 删除
    parent.removeChild(div_2);
}
//将div_3替换成一张图片
function updateNode(){
    //1 找到要替换的div
    var div_3 = document.getElementById("div_3");
    //2 找到div的父亲
    var parent = div_3.parentNode;
    //3 创建一个img元素对象
    var imgEle = document.createElement("img");
    //4 添加属性(src)
    imgEle.setAttribute("src", "001.jpg");
    //5 替换
    parent.replaceChild(imgEle, div_3);
}
//将div_4 复制,并加入到页面末尾
function copyNode(){
    //1 获得要复制的div
    var div_4 = document.getElementById("div_4");
    //2 复制  cloneNode=> 参数 如果是false.那么只复制本身不复制子节点.
                              //true==> 复制本身和所有子节点
    var div_copy = div_4.cloneNode(true);
    //3 获得父亲
    //4 添加
    div_4.parentNode.appendChild(div_copy);
}
</script>

</html>

修改 HTML DOM

改变 HTML 内容

使用 innerHTML ，innerText

<!-- 例子：更改 <p>元素的HTML 内容 ------------------------------------->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

<p>段落通过脚本来修改内容。</p>
 
</body>
</html>

改变 HTML样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
 
</body>
</html>

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name) 等同于 elementNode.value

elementNode.value指DHTML（dynamic html 动态html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1">hello div

</div>

<input id="add" type="button" value="add">
</body>

<script>
    var ele=document.getElementById("add");
   
    ele.onclick=function () {

// 第一种 --------------------------------------------------------------
    var div1=document.getElementsByClassName("div1")[0];
    var img=document.createElement("img");  
    img.setAttribute("src","56.jpg");
// 第二种 --------------------------------------------------------------
    img.src="56.jpg"              // dynamic html(动态html：增强html)

    div1.appendChild(img);
    }

</script>
</html>

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

posted @ 2020-07-03 23:32 ChungZhao 阅读(162) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ChungZhao

Chung is an ordinary person.