第一篇 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 ...
随机推荐
- Application provided invalid, non monotonically increasing dts to muxer in stream
很多同学在使用Ffmpeg过程中都遇到Application provided invalid, non monotonically increasing dts to muxer in stream ...
- 转： Appium ---移动自动化测试
转自:http://www.cnblogs.com/nbkhic/p/3803830.html 什么是appium? 下面这段介绍来自于appium的官网. Appium is an open-sou ...
- Android中常用布局单位
Android在UI布局时经常用到一些单位,对单位混用直接会影响UI的显示,要想正确的在布局中使用每种单位就必须先真正的熟悉它. UI显示效果的影响因素:屏幕尺寸.屏幕密度.分辨率:而android手 ...
- Machine Learning——Unsupervised Learning（机器学习之非监督学习）
前面,我们提到了监督学习,在机器学习中,与之对应的是非监督学习.无监督学习的问题是,在未加标签的数据中,试图找到隐藏的结构.因为提供给学习者的实例是未标记的,因此没有错误或报酬信号来评估潜在的解决方案 ...
- 170621 - Android ADB forward端口映射和reverse反向代理 使用笔记
个人理解 forward:端口映射 将本地PC指定Port端口,映射到设备手机指定Port端口上.以便解决 PC -> Phone 的访问问题PC 作为Client客户端 可以任意访问 Phon ...
- bzoj 2458: [BeiJing2011]最小三角形 题解
[前言]话说好久没有写题解了.到暑假了反而忙.o(╯□╰)o [原题] 2458: [BeiJing2011]最小三角形 Time Limit: 10 Sec Memory Limit: 128 M ...
- .net之GridView、DataList、DetailsView（一）
GridView:两种数据绑定方法 方法一:得到数据后,赋给DataSource属性,然后执行控件的DataBind()方法. BLL.Article bll = new BLL.Article(); ...
- 如何理解OOP？
OOP (Object Oriented Programming)面向对象编程 1.它符合我们现在思考习惯 2.它让一些复杂的事情变得更加简单 3.它让操作者比那成了指挥者
- window 添加环境变量
右击我的电脑 选择属性 点选高级选项卡 点击环境变量 在系统变量中选中path变量 点击编辑 在变量值得最后插入 ;C:\Python27\ (改为Python的实际的安装地址) 记住后面要有最后面 ...
- js 判断 IE 浏览器
遇到一些IE兼容问题,可以考虑在该浏览器环境下,用js控制样式,以下是判断IE版本的js代码 var browser=navigator.appName var b_version=navigator ...