第一篇 dom
文档对象模型（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
/* 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;}
第一篇 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 ...
随机推荐
- STM32 寄存器库和固件库
寄存器和固件库开发的差别和联系 固件库就是函数的集合,固件库函数的作用是向下负责与寄存器直接打交道.向上提供用户函数调用的接口(API). 在 51 的开发中我们经常的作法是直接操作寄存器,比方要控制 ...
- hdu 1159（Common Subsequence）简单dp，求出最大的公共的字符数
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Android Studio 2.0 正式版公布啦 （首次中文翻译）
Android Studio 2.0 公布了,添加了一些新特性: 1. 更加完好的 Instant Run 2. 更快的 Android Emulator 3.GPU Debugger Preview ...
- ANDROID常用的命令（转载，后续自己完善）
1.adb devices:查看当前已连接的设备.2.adb shell:进入android的shell模式.3.echo 3>/proc/sys/vm/drop_caches:清除一下系统的c ...
- iOS 常用图尺寸 汇总
iCON 准备一张1024x1024尺寸的图,打开链接 http://www.atool.org/ios_logo.php 在线批量生成各种尺寸的图片 启动图LaunchImage 640x960 2 ...
- linux下性能测试工具netperf使用
一.功能简介 netperf是一款针对网络性能的测试工具,主要基于TCP或UDP的传输.根据应用的不同,可以进行批量数据传输(bulk data transfer)模式和请求/应答(request/r ...
- NOJ1167 丑陋数 想法题
题意 丑陋数n的意思是n的全部素数因子仅仅有2,3,5. 求出前1500个丑陋数. (第一个丑陋数是1) 思路 用一个数组维护全部的丑陋数. 一開始数组中仅仅有一个数就是1. 如今能够确定的丑陋数还有 ...
- mysql解压版安装和卸载
问题1:发生系统错误 5. 解决:使用管理员身份安装即可 问题2:发生系统错误 2. 解决:cd C:\Program Files\MySQL\MySQL Server 5.6\bin 进入mysql ...
- mysql windows安装
http://blog.csdn.net/tossgoon/article/details/44412491 1.从该地址http://dev.mysql.com/downloads/mysql/中选 ...
- sql生成器(含凝视)问题修复版
接上篇http://blog.csdn.net/panliuwen/article/details/47406455 sql生成器--生成含凝视的sql语句 今天我使用自己写的sql生成器了.自我感觉 ...