zoukankan      html  css  js  c++  java
  • js03--document对象

    我们接着来学习js的一些基础知识点。

    1.document:

    document是window对象的一个属性。window对象表示浏览器中打开的窗口。如果文档包含框架(frame或者iframe),浏览器会为HTML文档创建一个window对象,并为每一个框架创建一个额外的window对象。所有的全局函数和变量都属于window对象的方法和属性。可以在浏览器中console一下window对象和document对象,理清它们的关系。

    document常用属性:

      document.title//设置文档标题,与HTNL中的title标签等价
    
      document.bgColor//设置页面背景颜色
    
      document.fgColor//设置页面前景色
    
      document.fileCreateDate//文件建立日期,只读属性
    
      document.fileModifiedDate//文件修改日期,只读属性
    
      document.URL//可返回当前文档的URL
    
      document.linkColor//未点击过的链接颜色
    
      doucment.alinkColor//鼠标在此链接上的颜色
    
      document.vlinkColor//已点击过的链接颜色
    
      document.charset//设置字符集,简体中文为gb2312
    
      document.fileSize//文件大小,只读属性
    
      document.cookies//设置和读出cookie
     

    document常用方法:

     

        document.createElement(Tag)//创建HTML元素
    
      document.getElementById(ID)//获得指定id值的对象
    
      document.getElementByName(name)//获得name值的对象
    
      document.write()//动态向页面写内容
    
      document.body.appendChild(oTag)//向节点添加最后一个子节点
    

    2.HTML DOM:
        网页被加载时,浏览器会创建DOM对象
        DOM是一颗对象的树
        
    3.js可以改变HTML元素、属性、样式、对事件作出回应、改变HTML输出流

        document.write("some text...")
        document.getElementById("eid").innerHTML="new text"
        document.getElementById("eid").src="..."
        document.getElementById("eid").style.color="gray"
    

       
    4.查找元素:
        id查找    document.getElementById("eid");
        标签查找    var x=document.getElementById("eid");var y=x.getElementsByTagName("p");
        类查找    document.getElementsByClassName("eclass");
        
    5.HTML DOM事件:
        分配事件:document.getElementById("eid").onclick=function(){}
        onload与onunload事件    网页加载
        onchange事件    结合对输入字段的验证
        onmouseover与onmouseout        鼠标移到或者离开元素
        onfocus事件        元素获得焦点
        
    6.节点(增加或者删除HTML元素):

        <script type="text/javascript">
            var para=document.createElement("p");
            var tnode=document.createTextNode("这是新段落哦!");
            para.appendChild(tnode);
            
            document.getElementById("div1").appendChild(para);
        </script>
        
        <script type="text/javascript">
            var par=document.getElementById("pid");
            var chi=document.getElementById("cid");
            par.removeChild(chi);
        </script>
    

     

  • 相关阅读:
    记一次小程序支付开发的坑,超级坑
    springboot集成redis 附redis基本操作类
    springboot整合mybatis及封装curd操作-配置文件
    微信小程序开发
    vue各种插件
    java数据导出成 EXCEL
    jsp自定义标签
    java生成验证码
    文字对齐格式
    css阴影效果
  • 原文地址:https://www.cnblogs.com/kuai-man/p/10713818.html
Copyright © 2011-2022 走看看