JS基础与DOM操作

Posted 2020-07-30 露西&哈特菲利亚

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="内容改变";