博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript(DOM操作)(Window.document对象)
阅读量:5070 次
发布时间:2019-06-12

本文共 2037 字,大约阅读时间需要 6 分钟。

一、找到元素:     

docunment.getElementById("id");                      根据id找,最多找一个;     

var a =docunment.getElementById("id");             将找到的元素放在变量中;     

docunment.getElementsByName("name");          根据name找,找出来的是数组;     

docunment.getElementsByTagName("name");     根据标签名找,找出来的是数组;     

docunment.getElementsByClassName("name")     根据classname找,找出来的是数组;

二、操作内容:

 1. 非表单元素:

1)获取内容:

alert(a.innerHTML);          标签里的html代码和文字都获取了,标签里面的所有内容。

alert(a.innerText);            只取里面的文字     

alert(a.outerHTML);          包括标签本身的内容(简单了解)

2)设置内容:

a.innerHTML = "<font color=red >hello world </font>";

a.innerText会将赋的东西原样呈现

清空内容:赋值个空字符串

2. 表单元素:

1)获取内容,有两种获取方式:

var t = document.f1.t1;                              form表单ID为f1里面的ID为t1的input;     

var t = document.getElementById("id");      直接用ID获取。

alert(t.value);                                            获取input中的value值;    

 alert(t.innerHTML);                                   获取<textarea> 这里的值 </textarea>;

2)设置内容: t.value="内容改变";

3. 一个小知识点:

<a href="http://www.baidu.com" onclick ="return false">转向百度</a> ;

加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase 则不会进行提交,利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的ID找到该元素,存于一个变量中:

var a = document.getElementById("id");

然后可以对该元素的属性进行操作:

a.setAttribute("属性名","属性值");    设置一个属性,添加或更改都可以;

a.getAttribute("属性名");              获取属性的值;

a.removeAttribute("属性名");        移除一个属性。

四、操作样式

首先利用元素的ID找到该元素,存于一个变量中:

var a = document.getElementById("id");

然后可以对该元素的属性进行操作:

a.style="" ;操作此ID样式的属性。

样式为CSS中的样式,所有的样式都可以用代码进行操作。

document.body.style.backgroundColor="颜色"; 整个窗口的背景色。

操作样式的class:a.className="样式表中的classname" 操作一批样式

例:展示图片的自动和手动切换;

若要让图片轮播有过渡效果 则在放置大图的div标签里建立一个表格存放图片,用js控制表格的marginleft属性从而实现(手风琴

无标题文档

 

转载于:https://www.cnblogs.com/jiuban2391/p/6036223.html

你可能感兴趣的文章
lintcode-easy-Remove Element
查看>>
mysql重置密码
查看>>
jQuery轮 播的封装
查看>>
一天一道算法题--5.30---递归
查看>>
switchcase的用法
查看>>
React.js 小书 Lesson15 - 实战分析:评论功能(二)
查看>>
Java基础03 构造器与方法重载
查看>>
kafka的使用
查看>>
编写Nginx启停服务脚本
查看>>
这些老外的开源技术养活了很多国产软件
查看>>
看图软件推荐
查看>>
安全测试的一些漏洞和测试方法
查看>>
spring框架学习笔记(八)
查看>>
JS取得绝对路径
查看>>
排球积分程序(三)——模型类的设计
查看>>
python numpy sum函数用法
查看>>
Linux中的SELinux详解--16
查看>>
php变量什么情况下加大括号{}
查看>>
less入门
查看>>
如何实现手游app瘦身?
查看>>