按钮和弹框
alert(“dont sleep”);//普通弹框
confirm(“are you ok”); //有取消和确定按钮弹框
prompt(“your password ?”);//弹出文本框
<button onclick="openwindow()">clickme</button>
<button onclick="closeWindow()">close</button>
<script>
//普通弹框------------1
alert("dont sleep");
//有取消和确定按钮弹框-----------------2
var flag=confirm("are you ok");
console.log(flag)//点击确定返回true否则false
//有文本框的弹框----------------3
var msg=prompt("your password ?");//弹出文本框
console.log(msg);//打印在文本框中输入的内容
if(msg==123){
alert("yes");
}
打开关闭浏览器
window.close(winid);
//windon.open() 打开窗口,有返回值
var winid=null;
function closeWindow(){//关闭当前的浏览器浏览器--------------------------关闭是当前！！！
if(winid!=null){
window.close(winid);
winid=null;
}
}
function openwindow(){
//windon.open() 打开窗口,有返回值
//window.open("http://www.baidu.com");
if(winid==null){
console.log(".....");
winid=window.open("http://www.baidu.com","","height=400,width=400,top=400,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
}
}
延时任务的取消和执行
window.clearTimeout(timeid);
timeid=window.setTimeout(go,5000); //有返回值，go为函数
<body>
<button onclick="timeOutFun()">开始任务</button>
<button onclick="timeFunClear()">取消</button>
<script>
var timeid=null;
function timeFunClear(){
console.log("取消任务");
window.clearTimeout(timeid);
}
function timeOutFun(){
/**
* setTimeout 延时任务
* function() 延时执行的函数
* 5000 延时的时间
*/
//写法一
// window.setTimeout(function(){console.log("王老吉")},
// 4000);
//写法二：
timeid=window.setTimeout(go,5000);
}
function go(){
console.log("加多宝");
}
</script>
</body>
周期任务
window.clearInterval(interid);
interid=window.setInterval(go,3000);//每3秒执行一次
<body>
<button onclick="StartFun1()">周期任务</button>
<button onclick="StopFun1()">结束</button>
<script>
var interid=null;
function StopFun1(){
if(interid!=null){
window.clearInterval(interid);
interid=null;
}
}
//设置周期任务
function StartFun1(){
if(interid==null){
//方法1：
// interid=window.setInterval(function(){console.log("123:"+
// new Date().toLocaleTimeString())},3000);
//方法2：
interid=window.setInterval(go,3000);
}
}
function go(){
console.log("333:"+
new Date().toLocaleTimeString());
}
</script>
</body>
窗体的方法（刷新/跳转）
用按钮实现
window.location.reload();//体现在body中的alert会弹窗
window.location.href= “http://www.baidu.com”;
<body onload="alert('加载数据1')">
<button onclick="testLocal()">点击</button>
<script >
//window的方法：
function testLocal(){
// location 对象用于获得当前页面的地址
// 设置 url请求的 链接
//window.location.href= "http://www.baidu.com";
//点击按钮实现本网页跳转（不会新建窗口）
//重新加载1--------------------
//window.location.reload();//体现在body中的alert会弹窗
//刷新页面/重新加载2-------------------
console.log(window.location.href);
window.location.href = window.location.href;
}
</script>
</body>
节点查找
nodeType 属性可返回节点的类型。
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
var pnode=document.getElementById(“p1”);//通过id获取节点
pnode.nodeName //获取属性 （节点名.属性）
获取节点名称和节点类型
<p id="p1" class="a1">hello</p>
<button onclick="getAttr()"><点我/button>
<script>
function getAttr(){
var pnode=document.getElementById("p1");
// 元素节点的名称 就是标记 p
// nodeType 是 1
// nodeValue null
console.log(pnode.nodeName+","+pnode.nodeType);//打印p 1
}
</script>
获取节点
通过id获取节点
获取节点属性
通过标签获取节点（返回数组）document.getElementsByTagName("p“)
通过name获取节点（返回数组）document.getElementsByName(“sex”);//多选框的值会有多个
通过class获取节点数组：document.getElementsByClassName(“box1”);
<p id="p1">asd</p>
<p class="box1">zxc</p>
<p class="box1">qwe</p>
<p>hello</p>
性别：<input type="radio" name="sex" value="nan" />nan
<input type="radio" name="sex" value="nv" />nv
<button onclick="getNode()">获取节点</button>
<script>
//注意：Attribute一般值id、class element一般指的是name等
function getNode(){
//通过id获取节点
var pnode=document.getElementById("p1");
//获取节点的Attribute->id
console.log(pnode.getAttribute("id"));
// 通过 标签获取 getElementsByTagName() 返回的是数组
var parr=document.getElementsByTagName("p");
console.log(parr)
/* 有p标签的都在parr中 且显示各个p标签的属性等信息
* 显示如下截图：
*/
//通过元素name获取节点集合
var namearr=document.getElementsByName("sex");
console.log(namearr);
//取得两个input元素的集合，包含sex的具体信息：nan/nv
//通过class获取节点集合
var carr=document.getElementsByClassName("box1");
console.log(carr);
//获取两个p标签元素的集合，包含p标签中的具体信息
}
</script>
获取父兄子节点
//获取根节点(div的根节点)
var proot=document.getElementById(“box”)
注意子节点的过滤：参考下面巴案例
// 只获取元素节点-------------------------推荐使用
var pnode2=proot.children;//总共3个,去除了空格
获取上一个元素节点 —var pper2=pnode.previousElementSibling;
获取父节点：var parent=pnode.parentNode;
//-获取第一个元素节点-----------------------推荐使用
var firstch2=proot.firstElementChild;
<body>
<div id="box">
<p id="p1">qwe</p>
<p id="p2">asd</p>
<p class="box1">zxc</p>
</div>
<br />
<button onclick="getMynodes()">获取子节点集</button>
<button onclick="getparent()">获取父节点</button>
<button onclick="getborther()">获取兄弟节点</button>
<script>
function getborther(){//获取兄弟节点
var pnode=document.getElementById("p2");
//上一个节点 如果 有空 获取的是空节点-------不推荐
var pper=pnode.previousSibling;
console.log(pper);
// 获取上一个元素节点 -----推荐
var pper2=pnode.previousElementSibling;
console.log(pper2);
}
function getparent(){//获取父节点
var pnode=document.getElementById("p1");
var parent=pnode.parentNode;
console.log(parent)
/*打印信息：
* <div id="box">
<p id="p1">qwe</p>
<p id="p2">asd</p>
<p class="box1">zxc</p>
</div>
*/
}
function getMynodes(){//获取子节点
//获取根节点(div的根节点)
var proot=document.getElementById("box")
// 获取子节点 获取空节点 + 元素节点--------不推荐
var pnode=proot.childNodes;//总共7个 加了4个空格
console.log(pnode);
// 只获取元素节点-------------------------推荐使用
var pnode2=proot.children;//总共3个,去除了空格
console.log(pnode2);
//获取第一个子节点--------不推荐
//如果有空格获取的是第一个空节点
var firstch=proot.firstChild;
console.log(firstch);//打印：#text
//-获取第一个元素节点---------------------------推荐使用
var firstch2=proot.firstElementChild;
console.log(firstch2)//打印：<p id="p1">qwe</p>
//空节点过滤,在子节点集合里过滤
for(var i=0;i<pnode2.length;i++){
if(pnode2[i].nodeType==1){//元素节点
console.log(pnode2[i])
/*打印信息：
* <p id="p1">qwe</p>
<p id="p2">asd</p>
<p class="box1">zxc</p> *
*/
}
}
}
</script>
</body>
节点的增删改
文本、属性的修改
div中子节点内容的提取
//原来div中只有：我是div
//获取文本节点：
1、获取divnode
2、获取文本节点var html=pnode.innerHTML;//获取元素节点 的 标签 + 文本
//修改标签+文本
获取div节点
pnode.innerHTML=“我是divs”//会替换我是div 将div中所有标签节点替换
//修改节点信息
获取div节点
pnode.innerText=“我是div”;//将div中所有文本内容替换
//之后变成：我是div;不会替换i，因为只改内容啊
<style>
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="b1" class="box1"><i>我是div</i></div>
<button onclick="testAtrri()">属性操作</button>
<button onclick="testText()">文本操作</button>
<button onclick="testHtml()">html操作</button>
<script>
function testHtml(){//获取内部标签+文本
//获取节点
var pnode=document.getElementById("b1");
//获取html
var html=pnode.innerHTML;//获取元素节点 的 标签 + 文本
console.log(html);
//打印结结果：<i>我是div</i>
//修改标签+文本
pnode.innerHTML="<b>我是divs</b>"//会替换<i>我是div</i>
}
function testText(){//修改文本信息
//获取节点
var pnode=document.getElementById("b1");
var text=pnode.innerText;//获取内部内容
console.log(text);//打印div中信息：我是div
//修改节点信息
pnode.innerText="<b>我是div</b>";
//之后变成：<i><b>我是div</b></i>;不会替换i，因为只改内容啊
}
function testAtrri(){//属性操作
//获取节点
var pnode=document.getElementById("b1");
//获取对应节点的class
var classstr=pnode.getAttribute("class");
console.log(classstr)//打印box1
//设置该节点class的值
pnode.setAttribute("class","box2");//div变成红色
}
</script>
</body>
属性的添加/删除
添加文本节点在该节点之前：
//获取父节点father
//获取该节点pnode
//创建新文本节点
var newnode=document.createTextNode(“我是添加在前一个的节点”)
//在b2之前添加节点
father.insertBefore(newnode,pnode)
创建标签节点
//获取div节点
//创建文本节点
var text=document.createTextNode(“我是有元素的文本节点”)
//创建元素节点
var tnode=document.createElement(“h1”)
//将文本加入到元素节点
tnode.appendChild(text)
//将元素节点加到div中
pnode.appendChild(tnode)
删除节点
//获取父节点father
//获取要删除的节点pnode
//删除
father.removeChild(pnode);
<body>
<div id="p1"></div>
<div id="p2">
<p id="b1">java</p>
<p id="b2">js</p>
<p id="b3">mysql</p>
</div>
<button onclick="addText()">添加文本</button>
<button onclick="addmynode()">添加文本节点</button>
<button onclick="addPre()">在该节点前添加节点</button>
<button onclick="delmynode()">删除节点</button>
<script>
function addPre(){//在该节点前添加节点
//获取父节点
var father=document.getElementById("p2")
//获取该节点
var pnode=document.getElementById("b2")
//创建新节点
var newnode=document.createTextNode("我是添加在前一个的节点")
//在b2之前添加节点
father.insertBefore(newnode,pnode)
console.log(father)
}
function addText(){//添加文本在div中
//获取div节点
var pnode=document.getElementById("p1")
//创建文本节点
var text=document.createTextNode("添加文本节点");
//将文本节点添加入div节点中
pnode.appendChild(text)
//添加后会在窗体显示
}
function addmynode(){//添加文本节点在div中
//获取div节点
var pnode=document.getElementById("p1");
//创建文本节点
var text=document.createTextNode("我是有元素的文本节点")
//创建元素节点
var tnode=document.createElement("h1")
//将文本加入到元素节点
tnode.appendChild(text)
//将元素节点加到div中
pnode.appendChild(tnode)
console.log(pnode)
}
function delmynode(){//删除节点 只能删一次 删空的会报错
//获取父节点
var father =document.getElementById("p2")
//获取要删除的节点
var pnode=document.getElementById("b2")
//删除
father.removeChild(pnode);
console.log(father)
}
</script>
</body>
div的操作
修改class：
获取节点
设置class’的值：pnode.setAttribute(“class”,“box”)
修改classname
pnode.className=“box”;
修改style中的样式
pnode.style.height=“200px”
pnode.style.width=“200px”
给元素节点加事件
//此时的元素是div 内容是hello
pnode.οnclick=function(){
alert(“你曾渴望的梦”);
}
<style>
.box{
width:100px;
height: 100px;
background-color: deepskyblue;
}
</style>
<body>
<div id="b1">hello</div>
<button onclick="changeBG()">我是安其拉</button>
<script>
function changeBG(){
//获取节点
var pnode=document.getElementById("b1")
//修改class的值
pnode.setAttribute("class","box")
//修改classname
pnode.className="box";
//修改style中的样式
// 和css样式名字一直 - 省略了 第二单词首字母大写
//fontSize - > font-size backgroundColor - > background-color
pnode.style.backgroundColor="greenyellow";
pnode.style.fontSize="30px";
//设置宽高 ，记得加上单位
pnode.style.height="200px"
pnode.style.width="200px"
//给元素节点加事件
//此时的元素是div 内容是hello
pnode.onclick=function(){
alert("你曾渴望的梦");
}
pnode.onmouseenter=function(){
pnode.style.backgroundColor="brown"
}
}
</script>
</body>
扫一扫
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
