每个标签都是一个对象

一：查找元素

　　1、直接查找

　　

  1. document.getElementById             根据ID获取一个标签
  2. document.getElementsByName          根据name属性获取标签集合
  3. document.getElementsByClassName     根据class属性获取标签集合
  4. document.getElementsByTagName       根据标签名获取标签集合

　　2、间接查找

  1. parentNode          // 父节点
  2. childNodes          // 所有子节点
  3. firstChild          // 第一个子节点
  4. lastChild           // 最后一个子节点
  5. nextSibling         // 下一个兄弟节点
  6. previousSibling     // 上一个兄弟节点
  7.  
  8. parentElement           // 父节点标签元素
  9. children                // 所有子标签
  10. firstElementChild       // 第一个子标签元素
  11. lastElementChild        // 最后一个子标签元素
  12. nextElementtSibling     // 下一个兄弟标签元素
  13. previousElementSibling  // 上一个兄弟标签元素

二：操作元素

　　1、内容

　　　　

  1. innerText   文本
  2. outerText
  3. innerHTML   HTML内容
  4. innerHTML
  5. value       值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="i1">
  9.         老男孩
  10.         <a>谷<span>歌</span></a>
  11.     </div>
  12.     <input type="text" id="i2" />
  13.     <select id="i3">
  14.         <option value="11">北京1</option>
  15.         <option value="12">北京2</option>
  16.         <option value="13">北京3</option>
  17.     </select>
  18.     <textarea id="i4"></textarea>
  19. </body>
  20. </html>

搜索框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="width: 600px;margin: 0 auto;">
  9.         <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
  10.  
  11.         <input type="text" placeholder="请输入关键字" />
  12.     </div>
  13.  
  14.     <script>
  15.         function Focus(){
  16.             var tag = document.getElementById('i1');
  17.             var val = tag.value;
  18.             if(val == "请输入关键字"){
  19.                 tag.value = "";
  20.             }
  21.         }
  22.         function Blur(){
  23.             var tag = document.getElementById('i1');
  24.             var val = tag.value;
  25.             if(val.length ==0){
  26.                 tag.value = "请输入关键字";
  27.             }
  28.         }
  29.     </script>
  30. </body>
  31. </html>

　　2、属性

　　

  1. attributes                // 获取所有标签属性
  2. setAttribute(key,value)   // 设置标签属性
  3. getAttribute(key)         // 获取指定标签属性

　　增加输入框

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" onclick="AddEle1();" value="+" />
  9.     <input type="button" onclick="AddEle2();" value="+" />
  10.     <div id="i1">
  11.         <p><input type="text" /></p>
  12.  
  13.     </div>
  14.     <script>
  15.         function AddEle1(){
  16.             // 创建一个标签
  17.             // 将标签添加到i1里面
  18.             var tag = "<p><input type='text'/></p>";
  19.             // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
  20.             document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
  21.         }
  22.         function AddEle2(){
  23.             // 创建一个标签
  24.             // 将标签添加到i1里面
  25.             var tag = document.createElement('input');
  26.             tag.setAttribute('type', 'text');
  27.             tag.style.fontSize = '16px';
  28.             tag.style.color = 'red';
  29.  
  30.             var p = document.createElement('p');
  31.             p.appendChild(tag);
  32.  
  33.             document.getElementById('i1').appendChild(p);
  34.         }
  35.     </script>
  36. </body>
  37. </html>

　　3、class操作

　　

  1. className                // 获取所有类名
  2. classList.remove(cls)    // 删除指定类
  3. classList.add(cls)       // 添加类

　　4、标签操作

　　        1）字符串形式
       　　 2）对象方式
           　　 docment.createElement()

　　例子同上

　　　5、样式操作

　　

  1. ##dom-输入框鼠标移动到输入框去除默认值
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <div style="margin: 0 auto">
  11.         <input id="i1" type="text" value="请输入关键词" onfocus="Focus();" onblur="Blur();"/>
  12.  
  13.         <!-- 新浏览器直接支持下面方式-->
  14.         <input type="text" placeholder="请输入关键词">
  15.     </div>
  16.     <script>
  17.         function Focus(){
  18.             var tag=document.getElementById("i1")
  19.             var value=tag.value
  20.             if (value=="请输入关键词"){
  21.                 tag.value=""
  22.             }
  23.         }
  24.         function Blur(){
  25.             var tag=document.getElementById("i1")
  26.             var value=tag.value
  27.             if (value==""){
  28.                 tag.value="请输入关键词"
  29.             }
  30.         }
  31.     </script>
  32. </body>
  33. </html>

　　6、位置操作

　　

  1. 总文档高度
  2. document.documentElement.offsetHeight
  3.  
  4. 当前文档占屏幕高度
  5. document.documentElement.clientHeight
  6.  
  7. 自身高度
  8. tag.offsetHeight
  9.  
  10. 距离上级定位高度
  11. tag.offsetTop
  12.  
  13. 父定位标签
  14. tag.offsetParent
  15.  
  16. 滚动高度
  17. tag.scrollTop
  18.  
  19. /*
  20.     clientHeight -> 可见区域：height + padding
  21.     clientTop    -> border高度
  22.     offsetHeight -> 可见区域：height + padding + border
  23.     offsetTop    -> 上级定位标签的高度
  24.     scrollHeight -> 全文高：height + padding
  25.     scrollTop    -> 滚动高度
  26.     特别的：
  27.         document.documentElement代指文档根节点
  28. */

　　7、提交表单

  1. document.geElementById('form').submit()

　　8、其他操作

　　

  1. console.log                 输出框
  2. alert                       弹出框
  3. confirm                     确认框
  4.  
  5. // URL和刷新
  6. location.href               获取URL
  7. location.href = "url"       重定向
  8. location.reload()           重新加载
  9.  
  10. // 定时器
  11. setInterval                 多次定时器
  12. clearInterval               清除多次定时器
  13. setTimeout                  单次定时器
  14. clearTimeout                清除单次定时器
  1. ##定时器
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <div id="li"></div>
  11.     <input type="button" value="增加提示" onclick="tip();">
  12.     <script>
  13.         function clear(){
  14.             var tag=document.getElementById("li");
  15.             tag.innerText="";
  16.         }
  17.         function tip(){
  18.             var tag=document.getElementById("li");
  19.             tag.innerText="提示信息";
  20.             setTimeout("clear()",300);
  21.         }
  22.  
  23.     </script>
  24. </body>
  25. </html>

javascript-dom文档对象模型2的更多相关文章

  1. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  2. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  4. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  5. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JavaScript学习总结（一）DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  8. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  9. JavaScirpt(JS)——DOM文档对象模型

    一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...

  10. DOM 文档对象模型

    document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...

随机推荐

  1. ehlib使用内存表的方法

    ehlib提供了一个TMemTableEh控件,这个控件不需要连接数据库就可以在ehlib中显示数据,在做一些虚的表格时比较有用. 简单的使用主要有这几个步骤: 1.添加量过控件Tdatasource ...

  2. php代码编写

    在php文件里,写入header('content-type:text/html;charset = uft-8');<!-- ============================== -- ...

  3. Linux命令（八）过滤文本 grep

    grep 命令介绍 grep是一个强大的文本搜索工具命令,用于查找文件中符合指定格式的字符串,支持正则表达式.如不指定任何文件名称,或是文件名为 -,则gerp命令从标准输入设备中读取数据. grep ...

  4. no-referrer-when-downgrade什么意思

    no referrer when downgrade的意思:降级时不推荐. 从一个网站链接到另外一个网站会产生新的http请求,referrer是http请求中表示来源的字段. no-referrer ...

  5. 重启Hbase命令

    注意先启动hadoop,记得重启zookeeper. 具体操作如下: cd hadoop-2.7.4/sbin/ && ./stop-all.sh && ./start ...

  6. MySql的相关资操作

    01-MySql的前戏   MySql的前戏 在学习Mysql之前,我们先来想一下一开始做的登录注册案例,当时我们把用户的信息保存到一个文件中: #用户名 |密码root|123321 alex|12 ...

  7. #35 string（缩点+动态规划）

    容易发现有了交换相邻字符的操作后,只要字符串所含有的字符种类和数量相同其就是等价的.这样的状态只有n^3级别,将其抽象成点子串变换抽象成边后就是求最长路径了,缩点dp解决. 码量巨大,不是很明白要怎样 ...

  8. SSM框架 mapper.xml中 value的空值判断问题

    先看解决方案,其他的都是问题的出处 解决方案:if中使用 _parameter,#{value}不变 <if test="_parameter!='' and _parameter!= ...

  9. docker--从仓库下载镜像到推送自己的项目到仓库步骤详解

    怎样从仓库下载的镜像,变成容器,并在容器中制作项目,再将容器变成镜像,然后将镜像推送到仓库? 一:从官网下载镜像 官方的https://hub.docker.com/提供了数十万个镜像提供大家下载 以 ...

  10. oracle 创建表空间 与创建用户与分配用户权限

    创建一个表空间名为ABC create tablespace "ABC"     //貌似要大写 datafile 'D:\oracle\TBSPACES\ABC.dbf'   / ...