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. 
						
  2. Docker 基础概念科普 和 常用操作介绍
		
    Docker 基础概念 Docker是什么?         Docker的思想来自于集装箱,集装箱解决了:在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之 ...
    
		
    3. 
						
  3. Python自动化 【第十五篇】：CSS、JavaScript 和 Dom介绍
		
    本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...
    
		
    4. 
						
  4. JavaScript基础—dom,事件
		
    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
    
		
    5. 
						
  5. Git介绍及常用操作演示（一）--技术流ken
		
    Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发 ...
    
		
    6. 
						
  6. HTML DOM和BOM常用操作总结
		
     JavaScript Code  1234567891011121314151617181920212223242526272829303132333435363738394041424344454 ...
    
		
    7. 
						
  7. CI 知识 ：Git介绍及常用操作
		
    Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发 ...
    
		
    8. 
						
  8. JavaScript基础 -- DOM
		
    一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM可以说是制作动态页面的强有力工具.DOM不是JavaScript语言的一部分,而是内置在浏览器中的一 ...
    
		
    9. 
						
  9. Hive基础之Hive表常用操作
		
    本案例使用的数据均来源于Oracle自带的emp和dept表 创建表 语法: CREATE [EXTERNAL] TABLE [IF NOT EXISTS] [db_name.]table_name  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Golang之并发篇
			
    进程和线程 A.进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位. B.线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位. C.一 ...
    
			
    2. 
						
  2. loadrunner11--集合点（Rendezvous ）菜单是灰色不能点击
			
    新建场景的时候“Manual Scenario”下的check box不能选中,取消选中就好了.即Vuser不能以百分比的形式. 所以:集合点灰化有两种情况: 脚本没有添加集合点函数 场景中设置以Vu ...
    
			
    3. 
						
  3. 2018年UI设计趋势概览
			
    ​互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的.在仔细分析了过去几年用户界面设计的趋势和创新之后,我们可以发现其背后的一些规律,2018年UI界面设计的趋势如下. 渐变色 在过去的几年 ...
    
			
    4. 
						
  4. Debian Buster Nginx 布署 Brophp 项目（类 Thinkphp）
			
    1 材料 debian buster nginx a project that develop base brophp 2 步骤 配置文件 /etc/nginx/sites-available/pis ...
    
			
    5. 
						
  5. vue-router2.0 初学--动态赋值
			
    A:router路由配置 1 export default new Router({ 2 routes: [ 3 { 4 path: '/home', 5 name: 'Home', 6 compon ...
    
			
    6. 
						
  6. Hibernate中常见的异常处理
			
    本文引自:http://www.blogjava.net/sy1214520/archive/2008/10/21/235667.html 本文总结Hibernate中常见的异常. 1. net.sf ...
    
			
    7. 
						
  7. 美团点评2017校招笔试真题-算法工程师A
			
    美团点评2017校招笔试真题-算法工程师A 1.下面哪种STL容器的实现和其它三个不一样 A. set B. deque C. multimap D. map 正确答案: B STL的容器可以分为以下 ...
    
			
    8. 
						
  8. 2018.10.21 codeforces1071A. Cram Time（贪心构造）
			
    传送门 直接先看最多能够凑出几个. 然后可以得到一个结论就是如果保证所有页数之和是小于等于A+BA+BA+B的一定都对应着一种合法方案. 如何构造? 我们对于第一天的AAA个小时,从大向小选,如果当前 ...
    
			
    9. 
						
  9. 笔记本的Windows系统怎么设置有了外接鼠标后停用触摸板
			
    点击控制面板,切换小图标模式,找到鼠标,点击它,然后会弹出一个窗口,找到ELAN选项卡(一般有个红色图标,不过可能需要对应驱动才会有此选项卡),选中插入外置 USB 指向装置时禁用.点击确定保存配置即 ...
    
			
    10. 
						
  10. IDEA如何初始化Git本地仓库，并提交到远程仓库
			
    本文转载自:http://blog.csdn.net/two_people/article/details/77008593 1. 首先在远程仓库上新建一个项目,码云和github都可以,我这里使用的 ...
    
			
    11.