1、DOM

1)直接寻找

(1)document.getElementById()     //根据ID获取一个标签;

(2)   document.getElementsByName()    //根据name属性获取标签集合;

(3)   document.getElementsByTagName()    //根据标签名获取标签集合;

(4)   document.getElementsClassName()     //根据Class属性获取标签集合;

2) 操作标签

  a.innerText

    获取标签中的文本内容;标签.innerText

    对标签内部文本进行重新赋值    标签.innerText = ""

  b.className

    tag.className       直接整体做操作

    tag.classList.add('className')    在之前的基础上添加指定样式;

    tag.classList.remove('className')   删除当前样式;

  c.innerHTML全部内容,找到所要找的标签,输出标签内的所有内容,包括其中的HTML标签,而innerText只是输出其中的文本;

   当为innerHTML赋值时,如果有HTML标签,则之间将对应的标签转化为标签的效果,而不会当文本输出;

3)对input标签来说,假设input的标签id='i1';则 var obj = document.getElementById('i1'); obj.value的结果为输出input中的内容,

若obj.value=‘我爱你中国’;则表示将input的文本框中的内容更新为:我爱你中国;

4)对select标签来说,同样可以获取选定的value值,同时也可以对值进行赋值;select有自己特殊的selectIndex,可以通过对selectIndex赋索引值也可以

改变选中的结果;

5)属性操作:

  obj.attributs表示获取某个标签中的所有属性,以数组的形式存放,obj.attributes[2]表示获取属性列表中的第三个属性值;

  obj.setAttributs表示将某个属性设置为多少;

  obj.removeAttributs表示将某个属性删除;

6)插入标签

  

7、提交表单

任何一个标签都可以通过,onclick事件来提交;

8、alert('您输入的有误,请重新输入!!')弹出警示对话框;

  confirm()弹出确认对话框;

  console.log()在当前命令行输出;

  location.href获取当前的url; location.href='https://www.baidu.com';跳转到百度; location.reload表示刷新,等价于location.href === location.href;

  var obj = setInterval(函数名,时间)表示每间隔多久执行一次;

  clearInterval(obj)表示清除定时器;

  var s1 = setTimeout(function(){},时间) 表示多长时间后开始执行function;

  clearTimeout(s1)表示清楚setTimeout的函数设置;

9、当前触发事件的标签;

  a、第一种绑定方式;

   <tr onmouseover="t1(this);"><td>1</td><td>2</td><td>3</td></tr>

    在事件中添加this,当调用事件函数时,将this传递给事件执行函数,就可以直接应用了,this即表示当前标签;

  b、第二种绑定方式:

    <input id='i1' type='button'>

    document.getElementById(''i1).onclick = function(){    函数内部可以直接应用this}

10、注:this的应用场景为啥不能用数组解析;

11、事件中,按执行顺序可分为两种:一种是捕捉,另一种是冒泡;具体如下例子:

12、词法分析;

Javascript——(2)DOM的更多相关文章

  1. JavaScript(5)——DOM

    DOM操作 为了写这一篇随笔真的是费了好多力气,虽然还是写不好.本来是从周一都开始写的,但是周二周三忙着去帮忙招新了,哈哈哈.感觉做自己喜欢的事特别好玩,虽然挺忙的.看着那些小鲜肉,感觉自己真的老了啊 ...

  2. JavaScript(四)——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  3. JavaScript(三)——DOM操作一

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...

  4. JavaScript(三)-- DOM编程

    JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...

  5. javascript (六)DOM

    学习后的总结: DOM:document object model 关于DOM的简介:http://www.w3school.com.cn/htmldom/dom_intro.asp 本文说的是HTM ...

  6. JavaScript(十一)Dom

    Dom(Document object module) 1.获取dom对象的方法 正常用的方法 推荐 getElementById()//通过id选择唯一的dom getElementsByClass ...

  7. JavaScript(7)——DOM

    什么是 DOM? DOM是 Document Object Model(文档对象模型)的缩写 DOM是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C ...

  8. Day4 JavaScript(二)dom操作

    dom(文档对象模型) 文档结构 文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分 标签,文本, ...

  9. 初探JavaScript(三)——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

随机推荐

  1. python笔记-02

    Python基础知识 —————————————— A,B,先把A乘以3,然后加上B,最后在加上列表A A = [1, 2, 3, 4, 5, 6] 赋值 B = [1, 2, 3] 变量 定义一个变 ...

  2. 关于vue :style 的几种使用方式

    :style的使用 一 ,最通用的写法 <p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgrou ...

  3. 使用Vue创建一个新项目

    1.环境 保证已经安装好了node\npm\vue等工具,将路径设置为想要建立新项目的文件夹路径 2.关于npm与cnpm npm包管理器,是集成在node中的,node环境安装完成,npm包管理器也 ...

  4. 查询linux版本信息

    uname -a (Linux查看版本当前操作系统内核信息) cat /proc/version (Linux查看当前操作系统版本信息) cat /etc/redhat-release (Linux查 ...

  5. [ZJOI2014] 力 - 多项式乘法 FFT

    题意:给定 \({q_i}\),求 \[E_i = \sum_{i<j}{\frac{q_j}{(j-i)^2}} - \sum_{i>j}{\frac{q_j}{(j-i)^2}}\] ...

  6. tomcat8.5和redis实现session共享

    1. 问题 ​ 由于之前看其他资料配置的session共享没注意自己tomcat的版本所以出现了诸多问题,tomcat8.5和之前版本的配置是不一样的. 2. 配置 ​ ①将如图所示三个jar包放入t ...

  7. ConsoleWindow中的双击日志定位

    很多项目都有自己重写Debug.Log的习惯,难免会遇到在Unity的Console窗口中双击日志, 但是没法直接跳转到想要看到的代码那一行的时候,解决办法有以下2种: 将自己封装的日志类制作成DLL ...

  8. 关于button在td中时,zclip复制不能的问题

    是button的定位问题引起的,解决方案:套上div加上position:relative即可 <td> <div style="position:relative&quo ...

  9. 用eclipse中自带的jetty启动项目

    1.建立datasources.xml,创建jndi <jee:jndi-lookup id="datasource" jndi-name="jndiname&qu ...

  10. [Luogu]小Z的AK计划

    Description Luogu2107 Solution 一开始打了一个60分的暴力DP,结果一分都没得--本地调了好久才发现是没开long long. 由于我的DP方程没有任何性质,就是一个01 ...