day53

参考:https://www.cnblogs.com/liwenzhou/p/8011504.html

JavaScript引入方式

由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window

BOM(alert、confirm、定时器)

location对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

常用属性和方法:

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

弹出框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:

alert("你看到了吗?");


确认框(了解即可)

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

confirm("你确定吗?")

提示框(了解即可)

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法:

prompt("请在下方输入","你的答案")
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

setTimeout()

语法:

var t=setTimeout("JS语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。

clearTimeout()

语法:

clearTimeout(setTimeout_variable)

举个例子

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:

clearInterval(setinterval返回的ID值)

举个例子:

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

DOM

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM查找标签</title>
</head>
<body> <div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c1">p标签2</p>
<p class="c2">第二个p标签</p> </body>
</html>

分别查找id、类和标签名。

间接查找

parentElement            父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM查找标签</title>
</head>
<body> <div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c1">p标签2</p>
<p class="c2">第二个p标签</p> <div id="d2">
<div id="d3">d2里面的d3</div>
<div id="d4">d2里面的d4</div>
<div id="d5">d2里面的d5</div>
</div> </body>
</html>

找所有子标签

第一个子标签元素
最后一个子标签元素

下一个兄弟标签元素
上一个兄弟标签元素
d4的兄弟标签

创建节点

语法:

document.createElement(标签名)

示例:

var divEle = document.createElement("div");

添加节点

语法:

追加一个子节点(作为最后的子节点)在内部最后添加

somenode.appendChild(newnode);

把增加的节点放到某个节点的前边。 在内部指定标签前面添加

somenode.insertBefore(newnode,某个节点);

先创建一个img标签,document.createElement("img");
把创建好的I'mEle添加到id是d1的标签内部,d1Ele.appendChild(imgEle)
最后设置imgEle的src属性

查看器中可以看出img标签已经放入。

insertBefore举例:

给以上的a标签设置文本内容和属性

以上内容总结:

1. 找标签
                1. 基本查找
                    1. 根据ID找标签(有且只能找到一个)
                        document.getElementById("ID值")
                    2. 根据class名字找(找到的可以是多个)
                        document.getElementsByClassName("class值")  
                    3. 根据标签名找(找到的可以是多个)
                        document.getElementsByTagName("标签名")
                
                2. 间接查找
                    1. 找父标签
                        document.parentElement
                    2. 找子标签(找到的可能是多个)
                        document.children
                    3. 第一个子标签
                    
                    4. 最后一个子标签
                    
                    5. 前一个兄弟标签
                    
                    6. 后一个兄弟标签
            2. 创建标签  *****
                creatElement("标签名")
            
            3. 添加标签
                1. 在内部的最后添加
                    appendChild("标签名")
                2. 在内部的某个标签的前面插入
                    insertBefore(要插入的新标签, 哪个标签之前)
            4. 属性(内置属性)
                .属性名="属性值"
                
                自定义的属性只能用:
                    .setAttribute("s9", "hao")
                    .getAttribute("s9")
                    .removeAttribute("s9")
                
            5. 文本操作
                1. 设置文本的内容
                    .innerText="<p>我是p标签</p>"        显示   <p>我是p标签</p>
                2. 设置标签内容
                    .innerHTML="<p>我是p标签</p>"     显示      我是p标签
                3. 获取值的区别
                    1. .innerHTML  --> 子标签和子标签的内容都取出来
                    2. .innerText  --> 只取标签之间的文本内容

补充:

innerText

innerText只取标签之间的文本内容

innerHTML

innerHTML子标签和子标签的内容都取出来

删除节点:

语法:

获得要删除的元素,通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点:

语法:

somenode.replaceChild(newnode, 某个节点);

获取值操作

语法:

elementNode.value

适用于以下标签:

  • .input
  • .select
  • .textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
举例:
02获取值相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取值相关</title>
</head>
<body> <form action=""> <label>用户名
<input type="text" id="i1" type="text">
</label>
<label>男
<input name="gender" value="1" type="radio">
</label>
<label>女
<input name="gender" value="1" type="radio">
</label> <select name="from" id="s1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="023">重庆</option>
<option value="022">天津</option>
</select> <textarea id="t1" name="memo" cols="30" rows="10"> </textarea>
</form> </body>
</html>

效果:


JavaScript基础DOM介绍和常用操作(5)的更多相关文章

  1. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  2. Docker 基础概念科普 和 常用操作介绍

    Docker 基础概念 Docker是什么?         Docker的思想来自于集装箱,集装箱解决了:在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之 ...

  3. Python自动化 【第十五篇】:CSS、JavaScript 和 Dom介绍

    本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...

  4. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  5. Git介绍及常用操作演示(一)--技术流ken

    Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发 ...

  6. HTML DOM和BOM常用操作总结

     JavaScript Code  1234567891011121314151617181920212223242526272829303132333435363738394041424344454 ...

  7. CI 知识 :Git介绍及常用操作

    Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发 ...

  8. JavaScript基础 -- DOM

    一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM可以说是制作动态页面的强有力工具.DOM不是JavaScript语言的一部分,而是内置在浏览器中的一 ...

  9. Hive基础之Hive表常用操作

    本案例使用的数据均来源于Oracle自带的emp和dept表 创建表 语法: CREATE [EXTERNAL] TABLE [IF NOT EXISTS] [db_name.]table_name ...

随机推荐

  1. Linux wget命令

    一.简介 wget是一个Linux系统中的下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS ...

  2. 调用数据库-corina

    pym = mysql(host='#####', port=3306, user='######', password='########', database='algorithm') #查询数据 ...

  3. spring 注解 注入属性 和 注解完成bean定义

    1. 使用 @Autowired 和 @Resource 注解来注入属性 2. 使用 @Component.@Repository.@Service.@Controller 注解,就将该类定义为一个B ...

  4. 继续修改爬虫百度贴吧,这次随意贴吧的任何一个index页都行,然后自动d盘生成tupian文件夹来保存

    from urllib.request import urlopenfrom bs4 import BeautifulSoupfrom urllib.request import urlopenimp ...

  5. Javascript 常用扩展方法

    这篇文章纯粹是为了保存这些方法,供以后翻阅,其实一直保存在 evernote 里面,但觉得还是放到对的地方会好点. 现在收录的很少,希望以后会慢慢增多. 数组扩展 contains,remove 扩展 ...

  6. DevExpress gridcontrol Master-Detail绑定到对象类型

    数据库:C_ProductPlan ,C_ProductPlanItemDTO定义:(实现每个计划条目-Master,对应多个ProcessInfo-Detail) [DataContract] [S ...

  7. Deployment failure on Tomcat 6.x. Could not copy all resources to D:\...\webapps\eptInfo. If a file is locked, you can wait until the lock times out to redeploy, or stop the server and redeploy, or ma

    tomcat服务并没有启动.工程中之前引了一个包,后来这个包被删除了,但是因为已经发布过这个工程了,所以classpath中就有这个包名了,这样发布的时候也会去找这个包但是已经不存在了,所以无copy ...

  8. 判断tableVIew滑动的方向

    首先设置一个旧的偏移量为0; self.oldContent = 0; - (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scr ...

  9. xib中快捷键

    Alt  + 点击视图,实现快速复制 点击视图, + Alt  将鼠标放在另一个视图上,可以显示两视图x 和y方向的距离, 按方向键上下,调节两视图的距离 Command + Shift + G 前往 ...

  10. 基于MOD13A1的锡林郭勒草原近13年植被覆盖变化 分析

    内蒙古师范大学地理科学学院 内蒙古师范大学遥感与地理信息系统重点实验室 摘要:本研究以内蒙古锡林郭勒草原为研究区,基于MOD13A1遥感数据,经过遥感预处理,得到研究区2001-2013年共13年夏季 ...