码迷,mamicode.com
首页 > 编程语言 > 详细

javascript DOM内容/操作步骤

时间:2017-10-16 16:28:49      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:one   link   根据   timeout   内容   family   img   inter   括号   

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

通常通过js可以对html元素进行操作,首先就要先找到这个元素;

  • 通过使用 getElementById("id") 方法             //id标签只有一个                          
  • 通过使用 getElementsByTagName(" ") 方法    //根据标签名找,找到的是数组
  • 通过使用 getElementsByClassName(" ") 方法     // 根据classname,找到的数组
  • 通过使用 getElementsByName(" ") 方法             // 根据name找,找打的是数组         zhu:括号内加引号

 

Window 对象属性和属性 http://www.runoob.com/jsref/obj-window.html


document操作:

1、找元素 get Element、、、
2、操作内容 innerHtml

  非元素内容属性:. innerHTML     设置或返回元素的内容  //例:documentGetmentById("id").innerHTML (元素内的内容是:)

  表单元素内容属性:. value

  元素的链接:.href   网页跳转形式:.target~~

技术分享
<script>
function changeLink(){
    document.getElementById(‘myAnchor‘).innerHTML="金百度";
    document.getElementById(‘myAnchor‘).href="http://www.baidu·com";
    document.getElementById(‘myAnchor‘).target="_blank";
}
</script>
</head>
<body>
 
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="修改链接">
 
</body>
链接和跳转栗子

3、操作属性:

   设置setAttribute(“属性”,“属性值”)

  得到getAttribute(“属性名”)

  删除removeAttribute(“属性名”)

 技术分享栗子

 4、作用样式 :

  元素.style.样式 = "";

 

技术分享
<script type="text/javascript">
function on(obj){
        obj.style.height = ‘200px‘;
        obj.style.width = "200px";
    }
    </script>    
    >
</head>
<body>
<div id="qq" style="width: 100px; height: 100px; background-color: red;" onClick="on(this)"></div>
作用样式栗子

 

5、操作元素(创建标签,删除标签)


 

时间控制:

setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout():在指定的毫秒数后调用函数或计算表达式。

 

javascript DOM内容/操作步骤

标签:one   link   根据   timeout   内容   family   img   inter   括号   

原文地址:http://www.cnblogs.com/xiandong/p/7660307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!