首页 > 其他分享> 文章详细

FrontEnd-Basis-7th

2020-07-03 23:34:35 阅读：282 来源： 互联网

标签：document FrontEnd Basis 元素 ele var 7th alert 节点

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

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

JavaScript（一）

BOM对象（续）

history对象

History 对象属性

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

length     // 返回浏览器历史列表中的 URL 数量。

History 对象方法

back()     // 加载 history 列表中的前一个 URL。
forward()  // 加载 history 列表中的下一个 URL。
go()       // 加载 history 列表中的某个具体页面。

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象方法

location.assign(URL)      // 加载新文档
location.reload()         // 刷新本页面
location.replace(newURL)  // 注意与assign的区别

<!-- 例子：------------------------------------------------------------>

<input type="button" value="重载" onclick="location.reload()">  <!-- 刷新本页面 -->
<input type="button" value="重载" onclick="location.href='http://www.baidu.com'">  <!-- 加载到一个新的页面 -->

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 () {               /* onl oad 一张页面或一幅图像完成加载 */
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }
    </script>

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

</body>
</html>

onmousedown & onm ousemove & onm ouseout & onm ouseover

<!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 onm ousedown="down()" onm ousemove="move()" >div1</div>
    <!--
    onm ousedown    鼠标按钮被按下
    onm ousemove    鼠标被移动
    onm ouseout     鼠标从某元素移开
    onm ouseover    鼠标移到某元素之上
    -->
    
<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>

标签：document,FrontEnd,Basis,元素,ele,var,7th,alert,节点
来源： https://www.cnblogs.com/chungzhao/p/13233226.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9