python开发【二十九篇】javascript----DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

DOM树结构：

基于上面的DOM结构，我们可以认识一下常用的DOM对象：

window                     window对象  //指的是整个浏览器窗口
document                   HTMLDocument对象 //代表的是整个浏览器文档区
document.documentElement   HTMLHtmlElement对象 //代表文档区的html文档根节点
document.head              HTMLHeadElement对象 //html头对象
document.body　　　　　　　　HTMLBodyElement对象　
document.title             HTMLTitleElement对象对象

元素都是在文档区中获取，获取元素都是document.getElementById。而当在判断页面上下滚动多少时，使用的document.documentElement

一.查找html元素对象

1.直接查找(推荐)

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取所有具有该name的标签集合
document.getElementsByClassName     根据class属性获取所有具有该class的标签集合
document.getElementsByTagName       根据标签名获取所有该tag标签集合
document.images                     获取所有的图片标签集合
document.links　　　　　　　　　　　　　获取页面上所有的超链接，集合
document.anchors　　　　　　　　　　　　获取页面上所有的锚点，集合
document.forms　　　　　　　　　　　　　获取页面上所有的表单集合
<body>
<form action="http://www.baidu.com">
<div id="divid" class="name" style="color:red background:black">我是内容</div>
<div id="divi" class="name" style="color:red background:black">我是内容2</div>
<div id="div" class="name" style="color:red background:black">我是内容3</div>
</form>
</body>
<script>
    var obj=document.getElementById("divid");
    var obj2=document.getElementsByClassName("name");
   alert(obj+"||"+obj.innerHTML+"||"+obj2+"||"+obj2[1].innerHTML);  //执行结果：[object HTMLDivElement]||我是内容||[object HTMLCollection]||我是内容2
</script>
</html>

     从上面代码执行的结果可以看出来，因为id永远是唯一的，所以通过id获取的对象是一个div元素对象。但是通过其他的非唯一的属性获取的对象，都是一个拥有该属性所有标签的collection（集合）。

2.间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
  
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素
<body style="background:green">
<div>
            <div class="c1">asdf</div>
            <div class="c1" id="i1">
                <p>asdf</p>
                <div name="n1">
                    <span>asd</span>
                </div>
                <div name="n1">
                    <a>dfs</a>
                    <a>asdf</a>
                </div>
            </div>
            <div class="c1">asdf</div>
        </div>
</body>
<script>
    var i1= document.getElementById("i1")  // 单个元素
    father_ele = i1.parentElement  //获取到父标签的html
//    father_ele = i1.parentNode  //获取到父标签的html 只有childnode 没有children
//    console.log(father_ele)
//      sons = father_ele.childNodes
      sons = father_ele.childNodes  //parentElement 和 parentNode 都有。含文本123
      sons = father_ele.children  //parentElement 的方法，不含文本123
      for (i in sons){
          console.log(sons[i])
      }
</script>
间接查找测试

二.获取元素对象属性及内容

一般情况下：

document.write(内容); //将内容直接在文档流中打印输出。 //注意区别：alert(内容)是直接弹出一个内容。
obj.innerHTML; //obj代表一个标签对象。获取标签的文本内容。
obj.textContent; //该标签和上面innerHTML的作用一样，都是获取标签中的文本内容。
obj.outerHTML; // 获取该标签所有内容并输出。
obj.id;
obj.className; //获取class属性的值  注意不能使用obj.class
//obj.name;    //该方法错误的
obj.tagName;  //获取标签名
obj.src='www.baidu.com';//更改一个标签的属性。
obj.style.color='red'; //更改一个标签的css样式

但是针对上面获取元素对象属性的方法并不是万能的，因为obj.class 和obj.name是获取不成功的。那么有没有万能的方法呢？

万能获取元素对象属性的方法：

setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

1.获取标签属性：

<body>
<form action="http://www.baidu.com">
搜索：<input id="inputid" class="lcclass" name="nname" type="text" value="请输出内容" />
    <br>
    <input type="submit" value="提交">
</form>
</body>
<script>
    var obj=document.getElementById("inputid");
   alert(obj.getAttribute("id")+"|"+obj.getAttribute("class")+"|"+obj.getAttribute("name")+"|"+obj.getAttribute("type"));
</script>
</html>

2.设置标签属性

<body>
<form action="http://www.baidu.com">
<div id="divid" class="name" style="color:red background:black">我是内容</div>
</form>
</body>
<script>
    var obj=document.getElementById("divid");
    obj.setAttribute("class","cclass")
   alert(obj.getAttribute("class"));  //执行结果：cclass
</script>
</html>

 

三.高度操作

注意：标签设置了height，而此时又设置了border或者padding时，border和padding都是外加高度，不从height中分高度。此时这个标签在页面占据的空间是height+border+padding。
scrollTop:      滚动条距离顶部高度
scrollHeight    自身文档总高度：div的height自身（包括div的滚轮到底的不可见高度）+padding 
 
clientTop       border(边框)高度
clientHeight    可见范围自身的高度：自身（只是div可见框的高度，滚动后的高度不算）+padding
 
offsetTop       距离上级定位的高度（如果上级没有position那就是距离html。如果上级有position那就是距离父级定位点的高度）
offsetHeight    可见范围自身的高度：自身（可视的高度，滚动后的高度不算）+padding+border
<html lang="en" style="border: 2px solid black">
<head id="ddd">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        width:300px;
        margin:13px auto;
        border:2px solid blue;
        padding:4px;
        }
    </style>
</head>
<body style="margin: 0;background:red">
        <div id="xo" style="height: 20px;background-color: green;">
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
        </div>

</body>
<script>
    var i = document.getElementById('xo');
    //alert(i.scrollHeight);   //执行结果：1654
    //alert(i.clientHeight);   //执行结果：28
    //alert(i.clientTop);      //执行结果：2
    //alert(i.offsetTop);      //执行结果：15
    alert(i.offsetHeight);     //执行结果：32

    </script>
</html>
测试

常见的高度操作属性：

浏览器左上角距离电脑屏幕左上角的高： window.screenTop;
浏览器左上角距离电脑屏幕左上角的宽： window.screenLeft;
电脑屏幕分辨率的高： window.screen.height;
电脑屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth; 
html文档中规定的body页宽： document .body.clientWidth;
html文档中规定的body页高： document .body.clientHeight;
html文档中规定的body页宽： document .body.offsetWidth   (包括边线的宽);
html文档中规定的body页高： document .body.offsetHeight (包括边线的宽);
body正文总宽度： document .body.scrollWidth;
body中正文的总高度： document .body.scrollHeight;
网页被卷去的高： document .body.scrollTop; （重要）
网页被卷去的左： document .body.scrollLeft; 
屏幕可视的高  ： document .doucumentElement.clientHeight; （重要）
出现滚动条时的总高度： document .doucumentElement.scrollHeight; （重要）
已经滚动的总高度： document .doucumentElement.scrollTop;（重要）

注：因浏览器兼容性不一致，导致所谓的高度值也很有可能不一致。不用太过于纠结于他算出的值，我们只需要获取到一个大概就行。

window属性验证：

<!DOCTYPE html>
<html lang="en" style="border: 7px solid black">
<head id="ddd">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        width:500px;
        margin:13px auto;
        border:2px solid blue;
        padding:4px;
        }
    </style>
</head>
<body style="margin: 0;background:red">
        <div id="xo" style="background-color: green;">
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
        </div>

</body>
<script>
    var wst=window.screenTop;
    var wsl=window.screenLeft;
    var wsh=window.screen.height;
    var wsw=window.screen.width;
    var wsah=window.screen.availHeight;
    var wsaw=window.screen.availWidth;
    document.write(wst+"|"+wsl+"|"+wsh+"|"+wsw+"|"+wsah+"|"+wsaw);  //执行结果：57|83|768|1366|768|1366
    </script>
</html>
window属性

执行结果：

body属性验证：

<!DOCTYPE html>
<html lang="en" style="border: 7px solid black">
<head id="ddd">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        width:500px;
        margin:13px auto;
        border:2px solid blue;
        padding:4px;
        }
        body{
        width:700px;
        height:300px;
        }
    </style>
</head>
<body style="margin: 0;background:red">
        <div id="xo" style="background-color: green;">
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
        </div>

</body>
<script>
    var wst=document.body.clientWidth;
    var wsl=document.body.clientHeight;
    var wsh=document.body.offsetWidth;
    var wsw=document.body.offsetHeight;
    var wsah=document.body.scrollWidth;
    var wsaw=document.body.scrollHeight;
    var dbst=document.body.scrollTop;
    var dbsl=document.body.scrollLeft;
    document.write(wst+"|"+wsl+"|"+wsh+"|"+wsw+"|"+wsah+"|"+wsaw+"|"+dbst+"|"+dbsl);  //700|300|700|300|790|1711|0|0
    </script>
</html>
body属性

documentElement属性验证：

<!DOCTYPE html>
<html lang="en">
<head id="ddd">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        width:500px;
        height:60px;
        margin:13px auto;
        border:2px solid blue;
        padding:4px;
        overflow:auto;
        }
        body{
        width:700px;
        height:300px;
        }
    </style>
</head>
<body style="margin: 0;background:red">
        <div id="xo" style="background-color: green;">
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
            <p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p><p>dfdfe</p>
        </div>

</body>
<script>
    var wsl=document.documentElement.clientHeight;
    var wsaw=document.documentElement.scrollHeight;
    var dbst=document.documentElement.scrollTop;
    var dbsl=document.documentElement.scrollLeft;
    document.write(wsl+"|"+wsaw+"|"+dbst+"|"+dbsl);  //执行结果：417|1704|0|0
    </script>
</html>
documentElement属性

三、js提示框

js提示框分为三种：alert(警告)，confirm(确认)，prompt(提示)

第一种：alert

<script>
var num="0";
alert(!!num);
</script>

执行结果：

第二种：confirm

<script>
  var c=confirm("你确定你需要这么做？"); /*确认框中，点击确定将会返回true。若点击取消，将会返回false*/
  if(c){
    document.write("你是"+c)
  }
  else{
  document.write("你是"+c)}
</script>

执行结果：

第三种：prompt

<body style="background:green">
<div>
    <img id="imgid" src="1.jpg">
</div>
</body>
<script>
    var imgname=prompt("请输入照片的名字：");
    var img=document.getElementById("imgid");
    img.src=imgname;
</script>

执行结果：

 

五.事件 

HTML DOM Event

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

注意区别一点：事件是指：当我们对某个标签做操作时，触发某一件事情。通过标签去触发别的事情发生

　　　　　　　方法是指：某个标签将会做某件事。在标签上发生某件事情

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
onscroll 事件在元素滚动条在滚动时触发。
oncontextmenu 点击右键时

 

鼠标 / 键盘属性

属性描述
altKey 返回当事件被触发时，"ALT" 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
metaKey 返回当事件被触发时，"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

 

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性描述
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，判断事件是否拥有可取消的默认动作。如果可以取消，使用preventDefault()方法取消默认动作
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法 描述
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。

实例：

让图标固定在屏幕某个位置，不管如何拉动他都出现右下角。在css实例中，我们使用了position=fixed实现了该功能，如今使用js再次实现

浮动图片，永久出现在屏幕右下角

当页面加载结束，光标就在输入框中闪烁

<body>
<form action="http://www.baidu.com">
搜索：<input id="inputid" type="text" value="请输出内容" />
    <br>
    <input type="submit" value="提交">
</form>
</body>
<script>
    var inputobj=document.getElementById("inputid");
    /*
    window.onload=function(){//当页面加载完毕时，触发一个事件
        inputobj.focus();//input标签获得焦点。
}
*/
inputobj.onfocus=function(){//input标签获得焦点时，触发一个事件。注意与上面的inputobj.focus()区别。
    inputobj.value="";
}
</script>
</html>
View Code

六.取消标签的默认行为

何为标签的默认行为，如：

a标签的超链接功能，点击a标签，将会跳转到对应的网站或者自动刷新当前网站

form标签的submit，具有提交功能，点击submit后，将会将数据提交到后台。

　　　　　　　　更多详情：猛戳这里

那么如何阻止默认行为呢？

1.阻止a标签链接的默认行为，

<div><a href="javascript:;">点我点我</a></div> //使用javascript:;这个死链接，阻止a标签刷新

除了使用上面的语句，还可以使用javascript:void(0)。 更多解析：猛戳这里

2.针对事件通过result false阻止默认行为。如果是result true则不阻止默认行为

<div><a href="http://www.baidu.com" onclick="alert(1) result false;">点我点我</a></div>  //在onclick后面加了result false后链接到百度网站将会被阻止掉。

实例：使用事件阻止默认行为，实现提交表单前，先用js判断用户名是否符合规则，符合则提交，不符合则不提交

<!DOCTYPE html>
<html lang="en">
<head id="ddd">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0;background:red">
<form id="formid" action="http://www.baidu.com" method="post">
    用户名：<input type="text" name="username" id="inputid">
    提交：<input type="submit">
</form>
</body>
<script>
    var formobj=document.getElementById("formid");
    formobj.onsubmit=function(event){ //form表单提交时触发事件
     var inputobj=document.getElementById("inputid").value;//获取用户名的值。
                                       //因为input标签得到的属性值是一个字典。{name:"username",value:"用户输入"}
    if (inputobj){
        alert(inputobj);
        return true;
    }else{
        alert("请输入用户名");
        return false;
    }
    }
    </script>
</html>
View Code

3.使用preventDfault()阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head id="ddd">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0;background:red">
<form id="formid" action="http://www.baidu.com" method="post">
    用户名：<input type="text" name="username" id="inputid">
    提交：<input type="submit">
</form>
</body>
<script>
    var formobj=document.getElementById("formid");
    formobj.onsubmit=function(event){ //form表单提交时触发事件//event类似于是任何事件的一个监控器。他可以控制事件的处理
     var inputobj=document.getElementById("inputid").value;//获取用户名的值。
                                       //因为input标签得到的属性值是一个字典。{name:"username",value:"用户输入"}
    if (inputobj){
        alert(inputobj);
       return true;
    }else{
        alert("请输入用户名");
        result false;
        //event.preventDefault();//preventDefault()方法作用就是取消事件的默认动作
    }
    }
    </script>
</html>
View Code

 

posted on 2017-07-11 16:44  进_进  阅读(143)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3