JS基础与DOM操作(一)

1、HTML元素标记 - 超文本标记语言
决定你网页中有哪些东西
alert("")警告对话框,作用是弹出一个警告对话框
confirm("")确定对话框,作用是弹出一个可供选择的确定对话框,
点击确定之后,它返回true,点击取消返回flase,可用变量来接收。
prompt("")作用是弹出一个可以输入内容的对话框。

2、CSS - 样式表
决定你网页中的这些元素标记的样式和布局

3、JS - JavaScript
决定你网页中的这些元素标记的功能和特效
万能变量:var
isNaN(); 判断是否是一个合法的数字类型,是数字,返回flase
运算符:
分支语句:if(){}else{}
循环语句:for(初始条件,循环条件,状态改变){循环体}
数组:var 变量名 = new Array();
数组赋值:变量名.[索引]=值;
数组取值:变量名.[索引];
数组属性:变量名.length;
方法:变量名.sort(); 排序数组
变量名.reverse(); 翻转数组
函数:function 函数名(){函数体}
函数调用:函数名();

侵入式
非侵入式
----------------------------------------------------------------
DOM操作:文档对象模型
【以下代码写在<script type="text/javascript">
</script>中间】
一、window对象:
window.open(‘连接地址‘,‘打开位置‘,‘新窗口的属性‘);
新窗口属性:toolbar=no/yes 新窗口有无工具条
menubar=no/yes 有无菜单栏
status=no/yes 有无状态栏
width=值,height=值 宽 高
left=值 距离左边多少
resizable=no/yes 窗口到校可不可以调
scrollbars=yes/no 出不出现滚动条
location=yes/no 有无地址栏

window.close();
window.opener; 没有打开它的父级窗体,此属性值默认为null

window.resizeTo(x,y); 调整宽度 高度
window.moveTo(x,y); 移动到某一位置
window.scrollTo(x,y); 滚动到页面的什么位置(类似锚点)

二、window.history对象:
window.history.go(n); 正数,就前进多少页,负数就后退多少页;
window.history.back(); 后退一页
window.history.forward();前进一页

三、window.location对象:
window.location.href; 获取当前页面的地址

四、window.status对象:
window.status = "内容";设置状态栏的文字

五、window.document对象:
var oDiv1 = document.getElementById("div2"); 根据id找,最多找一个
var oDivClass = document.getElementsByClassName("c1"); 根据class找,找出来是数组
var oDivName = document.getElementsByName("n1"); 根据name找,找出来是数组
var oDiv = document.getElementsByTagName("div"); 根据标签名找,找出来的是数组
----------------------------------------------------------------
操作非表单元素的内容:
innerHTML = ""; - 拼标记,浏览器会把标记生成相应效果;
innerText = ""; - 不管你写的什么,原封不动的给你放进去;

单独拿来用的话,就是获取元素中的文本内容
变量名.innerHTML - 会把里面所有的内容都取出来
变量名.innerText - 会把里面所有的内容,去除标记,取出来

操作表单元素的内容:value
变量名.value 会把里面所有的内容,去除标记,取出来
变量名.innerHTML 会把里面所有的内容都取出来

设置内容:变量名.value="内容改变";

时间: 2024-12-26 14:53:10

JS基础与DOM操作(一)的相关文章

js基础和dom操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局用:<style type="text/css"></style> 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效.只要放在HTML里就可以.用:<script type="text/javascript"><script> alert() 弹出警告对话框 :con

js基础篇(dom操作,字符串,this等)

首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一定是取出class里面的这个字符串,然后我们想办法判断出这个字符串里面是否存在aa,并且只有aa. 我给大家提供了三种方法,第一种利用getAttribute方法,第二种利用getElementByClassName,第三种就是正则匹配了. 代码如下: /* ***用getAttribute方法实现 */ v

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

1     Javascript回顾 问题:Javascript能做什么? 1. 获取操作dom <style> .aa{ background:red} .bb{ background:blue} </style> <body> <div id="dv" title="提示信息" class="aa">AAAAAAAAA</div> <button onclick="f

js基础复习---数组操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="keywords" content="js数组操作"> <meta name="description" content="js基础之数组api练习"> <title

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

js中的DOM操作(一)——查看及设置节点

一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口. 在HTML和JavaScript的学习中,DOM操作可谓时重中之重.今天,小编就领着大家来看看DOM操作是个什么样子!! 二.DOM节点  DOM节点分为三大类:元素节点.属性节点.文本节点: 而我们心心念念想知道的DOM树就长酱紫!          

js练习【DOM操作】

完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>[js小练习]:DOM操作</title> </head> <body> <div id="testField&qu

js面试题-----DOM操作和BOM操作

题目1:DOM是哪种基本的数据结构 答案:DOM是一种树形结构的数据结构 题目2:DOM操作的常用API有哪些 答案:获取DOM节点,以及节点的property和Attribute.获取父节点,获取子节点.新增节点,删除节点 题目3:DOM节点的Attribute和property有何区别 答案:property只是一个JS对象的属性的修改.(通过obox.name = xxx操作) Attribute是对html便签属性的修改 题目4:如何检测浏览器的类型 答案:可以通过检测navigator

Jquery基础之DOM操作

 一.jQuery对象与Dom对象的区别 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象.所以一些新手就很迷惑,为什么${”#Element”}不能直接innerHTML,这就是原因所在,解决方式请看下文. jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有