js基础和dom操作

Posted 2020-07-30 斐雪

1、html元素标记 - 超文本标记语言
决定你网页中有哪些东西

2、CSS - 样式表
决定你网页中的这些元素标记的样式和布局
用：<style type="text/css"></style>

3、JS - javascript
决定你网页中的这些元素标记的功能和特效。只要放在HTML里就可以。
用：<script type="text/javascript"><script>

alert() 弹出警告对话框 ；
confirm() 弹出确定对话框
prompt() 作用是弹出一个可以输入内容的对话框

javascript的语法跟vs很像。
var 变量通用类型，万能变量
数组的定义：var arr=new Array();
function 方法函数

侵入式：
ps:<a onclick="a()">aaaa</a>
<script type="text/javascript">
function a()
{
prompt("你叫什么","哈哈哈（对话框默认输入内容）")
}
<script>
非侵入式：

DOM操作：文档对象模型
一、window对象：
window.open(‘连接地址‘,‘打开位置‘,‘新窗口的属性‘);
打开位置：_blank 打开方式，在新窗口还是自身的窗口
控制打开的窗口格式，可以写多个，用空格隔开如下：
toolbar=no 新打开的窗口无工具条
menubar=no 无菜单栏
status=no 无状态栏
resizable=no 窗口大一不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏

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("id");根据ID找，最多找到一个
var oDivClass = document.getElementsByClassName("class");根据class找，找出来的是数组
var oDivName = document.getElementsByName("n1");根据name找，找出来的是数组
var oDiv = document.getElementsByTagName("div");根据标签名找，找出来的是数组

操作非表单元素的内容：
innerHTML = ""； - 拼标记，浏览器会把标记生成相应效果；
innerText = ""; - 不管你写的什么，原封不动的给你放进去；

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

操作表单元素的内容：value