zoukankan      html  css  js  c++  java
  • 浅尝JavaScript document对象

    document对象

    每个载入浏览器的 HTML 文档都会成为 Document 对象。document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    <body>
    <div id="h">
    <div></div>
    <span></span> 
    </div>
    <div id="l"></div>
    <div class="haha"></div>
    <div class="haha"></div>
    <span class="haha"></span>
    <input type="text" name="dada" />
    </body>
    
    <script>
     //var a=document.getElementById("l");
    //a.childNodes
    //alert(a.previousSibling) 找到同级
    /*alert(a.childNodes[5]);*///找子节点的时候的时候除了找标签还会找空格
    /*alert(a.firstChild)*///返回文档的首个子节点
    /*alert(a.parentNode)*///找到该元素的父级元素
    /*alert(a)*///找到的只有一个
    /*var b=document.getElementsByClassName("haha");//找到的是多个,返回一个数组 alert(b[2]);*/
    /*var c=document.getElementsByTagName("div")//根据标签名找,找到的是多个,返回一个数组 alert(c[0])
    /*var d=document.getElementsByName("dada") alert(d[0])根据name找,可以找到多个,返回数组,主要针对表单元素。*/



    操作样式
    var a=document.getElementById("h")
    a.style.backgroundColor="red"
    alert(a.style.backgroundColor)
    a.style.width=""   属性值为空的时候就是删除了样式
    <div id="aaa">
    
    <span>hahaha</span>
    </div>
    
    
    </body>
    <script>
    //document整个文档
    
    //控制元素
    //var a=document.getElementById("aaa")
    
    /*a.remove()*/;     //移除元素,移除只是在浏览器显示页面移除了。
    //var bb=document.createElement("span")
    //a.appendChild(bb)    //追加子元素
    
    //操作元素
    //var a=document.getElementById("aaa");
    /*alert(a.innerText) */                       //innerText      取元素中的文本内容
    a.innerText="world"               //给元素赋文本值
    //alert(a.innerHTML)          //区元素的HTML代码内容
    //a.innerHTML=""                   //给元素放一个HTML代码
    
    
    表单元素
    /*var a=document.getElementById()
    a.value="yonghuming";//给元素赋值
    alert(a.value);*///取值 
    
    
    操作属性
    var a=document.getElementById("aaa");
    a.setAttribute("bs","100")  ////给标签加属性、属性
    a.getAttribute("bs")   //获取属性值
    a.removeAttribute("bs")  // 移除属性
    /*var a=document.getElementById("aaa");
    a.setAttribute("bs","200");*/
    //alert(a.getAttribute("bs"));
    

      

    /*鼠标事件
    onclick 鼠标单击触发
    ondblclick 鼠标双击触发
    onmouseover 鼠标移上去触发
    onmouseour 鼠标离开触发
    onmousemove 鼠标移动触发*/

    /*键盘事件:
    onkeydown 键盘按下触发
    onkeyup 按键抬起触发
    onkeypress 按键触发*/


    /*表单元素事件
    onfocus 获得焦点出发
    onblur 失去焦点触发
    onchange 内容改变的时候触发
    */
    //JS不支持统一加事件,但是可以通过循环加事件

  • 相关阅读:
    文件下载断点续传插件webupload插件
    cocos2dx 2.x 粒子渲染时有黑色粒BUG
    VOIP NAT穿越之SIP信令穿越
    hdu 5086 Revenge of Segment Tree(BestCoder Round #16)
    [并发]线程池技术小白
    调用 COM 对象
    switch-case 执行顺序
    HDELETE
    python and java
    部分查询练习题及答案
  • 原文地址:https://www.cnblogs.com/gaofangquan/p/7050662.html
Copyright © 2011-2022 走看看