文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找找到的氛围两类第一是元素、第二是元素集合

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

 
上面node包含所有文本
下面的只包含说哦有标签

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

如果一个标签的nodeType等于1就说明这个标签里面没有文本内容
如果一个标签的nodeType等于3，就说明这个标签里面包含的有文本内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
123
<div class="c1">divvvvv</div>
<div class="c1" id="il">
<p>ppppp</p>
<div name="n1">
<span>span</span>
</div>

<div name="n1">
<a>1</a>
<a>11111</a>
</div>
</div>
<div class="c1">c111111111</div>
</div>
</body>
<script>
var li=document.getElementById("il");
var p1=li.parentNode;
var p2=li.parentElement;

//console.log(li)
//console.log(eles_nodes)

var elees_node= p1.childNodes; //含文本的所有标签
for(var j=0;j<elees_node.length;j++){
var current_node=elees_node[j];
if (current_node.nodeType==1){ //这里判断，输出current_node中不包含文本内容的标签
console.log(elees_node[j])
}
}

</script>

</html>

二、操作

1、内容

 innerText   文本

 outerText

 innerHTML   HTML内容

 innerHTML

 value       获取或者赋值表单标签中的值

下面例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<a href="http://www.baidu.com">百度<span></span></a>

    <input id="txt" type="text"/>

    <select id="sel">

        <option value="">上海</option>

        <option value="">北京</option>

    </select>

<script>

    var obj=document.getElementsByTagName("a");

//    alert(obj.innerTextr);   //获取文本信息

//    alert(obj.innerHTML);   //获取标签内容

    //获取表单中的值

    var val=document.getElementById("txt").value;

    console.log(val);

    //更改值

    obj.innerText='';

    obj.innerHTML="<p>123</p>"

</script>

</body>

</html>

2、class操作

 obj.className  以字符串形式获取样式

 obj.classList     所有的样式放到列表中

 obj.classList.remove   移除样式

 obj.classList.add   添加样式

例子：

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}

实例模态多画框

点击取消又会回到上图一

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .hide{

             display: none;

         }

         .c1{

             background-color: papayawhip;

             position: fixed;

             top: ;

             left: ;

             right: ;

             bottom: ;

             background: rgba(,,,.);

             z-index: ;

         }

         .c2{

             position: fixed;

             width: 400px;

             height: 300px;

             background-color: white;

             top: %;

             left: %;

             margin-top: -150px;

             margin-left: -200px;

             z-index: ;

         }

     </style>

 </head>

 <body>

     <div>

         <table>

             <tr>

                 <td>注册</td>

                 <td>登录</td>

                 <td><input type="button" value="点我" onclick="show()"/></td>

             </tr>

             <tr>

                 <td></td>

                 <td></td>

                 <td><input type="button" value="点我"/></td>

             </tr>

             <tr>

                 <td></td>

                 <td></td>

                 <td><input type="button" value="点我"/></td>

             </tr>

         </table>

     </div>

     <div id="shade" class="c1 hide" ></div>

     <div id="modal" class="c2 hide">

         <p>密码：<input type="text"/></p>

         <p>密码：<input type="password"/></p>

         <p>

             <input type="button" value="确定"/>

             <input type="button" value="取消" onclick="Hide()"/>

         </p>

     </div>

 <script>

     function show(){

         document.getElementById("shade").classList.remove("hide");

         document.getElementById("modal").classList.remove("hide");

     }

     function Hide(){

         document.getElementById("shade").classList.add("hide");

         document.getElementById("modal").classList.add("hide");

     }

 </script>

 </body>

 </html>

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

第一篇 dom的更多相关文章

Three.js 第一篇：绘制一个静态的3D球体
第一篇就画一个球体吧首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器前面的话选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
深入理解ajax系列第一篇——XHR对象
× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...
深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用前面的话函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
Python开发【第一篇】：目录
本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...
深入理解javascript函数系列第一篇
前面的话函数对任何一门语言来说都是核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中 ...
Vue入坑第一篇
写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言本篇作为vue入门的一 ...
AntDesign-React与VUE有点不一样，第一篇深入了解React的概念之一：JSX
AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...
从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）
从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

随机推荐

Spring WebSocket Support官方文档+翻译
实时更新技术能够应用在很多场景中,比如在浏览器中聊天.股票报价.状态更新.现场直播.这些需求对时间的延迟性都很敏感,但是我们可以发现他们存在这共有的共性. 标准的HTTP请求,是一次请求对应一次相应. ...
Java NIO —— Buffer（缓冲区）
Buffer是一个抽象类,位于java.nio包中,主要用作缓冲区.注意:Buffer是非线程安全类. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO Buffer ...
CSDN--字体颜色--markdown
在写blog时,想高亮某些字,但是发现markdown更改字体颜色不像word里那么方便,于是查了一下,要用一下代码进行更改字体颜色,还可以更改字体大小,还有字体格式 <font 更改语法> ...
解决Mysql - can't get stat of (errcode:13)
[1]线上环境问题大清早来上班,被运维扔了一个错误日志截图,如下: Mysql 导入数据失败! [2]分析问题记得如此类似的问题,好像已经都解决了.为啥又复现了呢?难道是自己上次没有考虑全场景?或 ...
Sql Server 查询一段日期内的全部礼拜天
/* 查询一段日期内的全部礼拜天 @startdate 開始日期 @enddate 结束日期 */ declare @startDate datetime declare @endDate datet ...
getMeasuredHeight(),getScrollY(),getHeight()的区别和联系
前言:关于控件的高度有两种获取方式,一个是获得控件的实际大小(getMeasuredHeight),就是包含显示部分和已显示的部分: 而getHeight是获得控件的显示的大小,如果控件大小超出的屏幕 ...
solr查询
1.根据字段查询: http://www.360doc.com/content/14/0306/18/203871_358295621.shtml 2.模糊查询: http://www.tuicool ...
C语言基础知识【常量】
C 常量1.常量是固定值,在程序执行期间不会改变.这些固定的值,又叫做字面量.常量可以是任何的基本数据类型,比如整数常量.浮点常量.字符常量,或字符串字面值,也有枚举常量.常量就像是常规的变量,只不过 ...
读《《图解TCP-IP》》有感
读<<图解TCP/IP>>有感 TCP/IP 近期几天读完<<图解TCP/IP>>,收获蛮多,记得上学时读stevens的<<TCP/IP具 ...
com.netflix.hystrix.contrib.javanica.exception.FallbackDefinitionException: fallback method wasn't found: serviceError([class java.lang.String]) 异常
在使用spring cloud 的 Hystrix 后可能会遇到如下截图错误: 后台代码如下: 找了好一会经过分析参数方法和原方法参数步一致造成: 修改后代码如下:

第一篇 dom

一、查找元素

二、操作

第一篇 dom的更多相关文章

随机推荐

热门专题