Dom初
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
alert(document.body.childNodes[1].nodeType);
}
</script>
</head> <body>
aaafsa
<span>fff</span>
</body>
</html
PE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{ //获取oul
var oUl=document.getElementById('ul1');
var i=0;
//oul的弟节点
for(i=0;i<oUl.childNodes.length;i++)
{ //的返回类型是真
if(oUl.childNodes[i].nodeType==1)
{ //背景设置红色
oUl.childNodes[i].style.background='red';
}
}
} </script>
</head> <body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</ht
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parentNode</title>
<script>
window.onload=function()
{
//获取a数组节点
var aA=document.getElementsByTagName('a');
var i=0;
//循环a[index]数组
for(i=0; i<aA.length; i++)
{
aA[i].onclick=function()
{
//获取a数组的父节点li设置属性为隐藏!
this.parentNode.style.display='none';
}
}
}
</script>
</head> <body><ul>
<li>aass <a href="javascript:;">隐藏</a></li>
<li>5453 <a href="javascript:;">隐藏</a></li>
<li>cvxc <a href="javascript:;">隐藏</a></li>
<li>ertert <a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> </style>
<title>用class选择元素</title>
<script>
function getByClass(oParent, sClass)
{
//获取obj的所有节点
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;
//循环obj[index];
for(i=0; i<aEle.length; i++)
{
//判断obj的元素属性是否等于sclass
if(aEle[i].className==sClass)
{
//添加到数组aresult里
aResult.push(aEle[i]);
}
}
//返回值给这个函数
return aResult;
}
window.onload=function()
{
//获取ul1
var oUl=document.getElementById('ul1');
//启动函数
var aBox=getByClass(oUl, 'box'); var i=0;
for(i=0; i<aBox.length; i++)
{ //循环class等于box的元素index的背景设置成黄色
aBox[i].style.background='yellow';
}
}
</script>
</head> <body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Dom初的更多相关文章
- DOM初体验(绑定事件,监听事件)
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
- 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- javascript_19-DOM初体验
DOM DOM: 文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML和XML文档的API. DOM可以把HTML和XML描述为一个文档树.树上的每一个分支 ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- JSAP101
JSAP101 1.DOM 1)文档对象模型 文档:把一个Html文件看成一个文档,所以把这个文档看成一个对象.XML文件也可以看成一个文件.XML侧重于存储数据,html主要以展示为主.一个页面就是 ...
- JavaScript DOM 编程艺术(第二版) 初读学习笔记
这本书留给我的印象就是结构.表现和行为层的分离,以及书后面部分一直在强调的最佳实践原则:平稳退化,逐步增强,向后兼容以及性能考虑. 要注意这不是一本JavaScript入门书籍~ 2.1 准备工作 用 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
随机推荐
- DllMaps
http://www.mono-project.com/docs/advanced/pinvoke/dllmap/ http://www.mono-project.com/docs/advanced/ ...
- php json_decode
php代码 <?php $data='[{"Name":"a1","Number":"123","Con ...
- Java多线程编程核心技术---拾遗增补
线程状态验证 public class MyThread extends Thread { public MyThread() { System.out.println("构造方法中的状态: ...
- C#实现Excel模板导出和从Excel导入数据
午休时间写了一个Demo关于Excel导入导出的简单练习 1.窗体 2.引用office命名空间 添加引用-程序集-扩展-Microsoft.Office.Interop.Excel 3.封装的Exc ...
- 如何解决winows启动后出现grub?
village :村庄, 村民 villa: 别墅 setting: 设置; ** 环境, 背景, 布置, 布局, 底座 what's the setting of the villa like? h ...
- Memcached基础知识
主要内容: Memcached基本的工作原理 Memcached的两阶段哈希 Memcached的数据存储方式 Memcached新建Item分配内存过程 Memcached的数据过期方式 Memca ...
- VTK初学一,c_Line_CellArray线段的CellArray绘制
VTK窗口默认坐标方向: #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE ...
- jquery Ajax跨域调用WebServices方法
由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...
- iOS 8 牛刀小试
iOS 8 牛刀小试 1.UIWindow的bounds发生变化(Window本身发生了旋转) iOS 7之前Window的bounds不会随着方向而变化,但是到了iOS 8以后,随着设备方向的旋转, ...
- JSP中根据不同的条件显示不一样的格式
在做项目中遇到这样的场景: 当查询到记录时,需要将记录的字段作为下拉列表,让用户选择使用,即显示的是下拉列表. 当没有查询到记录时,则让用户手工填写该值,即显示的是文本框. 前段jsp使用if标签如下 ...