DOM基础
•什么是DOM
•浏览器支持情况
lDOM节点
•childNodes  nodeType
–获取子节点
<!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
–children
•parentNode
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
–例子:点击链接,隐藏整个li
<!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>
•offsetParent
–例子:获取元素在页面上的实际位置
 
DOM节点
•首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
•兄弟节点
–有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
 
操作元素属性
元素属性操作
•第一种:oDiv.style.display=“block”;
•第二种:oDiv.style[“display”]=“block”;
•第三种:Dom方式
DOM方式操作元素属性
•获取:getAttribute(名称)
•设置:setAttribute(名称, 值)
•删除:removeAttribute(名称)
 
DoM元素灵活查找
用className选择元素
–通过className条件筛选
•如何用className选择元素
–选出所有元素
•封装成函数

<!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节点:parentNode、childNodes、nodeType、children
元素属性:getAttribute、setAttribute、removeAttribute
用class选取元素
 

Dom初的更多相关文章

  1. DOM初体验(绑定事件,监听事件)

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

  2. 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. javascript_19-DOM初体验

    DOM DOM: 文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML和XML文档的API. DOM可以把HTML和XML描述为一个文档树.树上的每一个分支 ...

  4. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  5. JSAP101

    JSAP101 1.DOM 1)文档对象模型 文档:把一个Html文件看成一个文档,所以把这个文档看成一个对象.XML文件也可以看成一个文件.XML侧重于存储数据,html主要以展示为主.一个页面就是 ...

  6. JavaScript DOM 编程艺术(第二版) 初读学习笔记

    这本书留给我的印象就是结构.表现和行为层的分离,以及书后面部分一直在强调的最佳实践原则:平稳退化,逐步增强,向后兼容以及性能考虑. 要注意这不是一本JavaScript入门书籍~ 2.1 准备工作 用 ...

  7. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  8. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  9. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

随机推荐

  1. DllMaps

    http://www.mono-project.com/docs/advanced/pinvoke/dllmap/ http://www.mono-project.com/docs/advanced/ ...

  2. php json_decode

    php代码 <?php $data='[{"Name":"a1","Number":"123","Con ...

  3. Java多线程编程核心技术---拾遗增补

    线程状态验证 public class MyThread extends Thread { public MyThread() { System.out.println("构造方法中的状态: ...

  4. C#实现Excel模板导出和从Excel导入数据

    午休时间写了一个Demo关于Excel导入导出的简单练习 1.窗体 2.引用office命名空间 添加引用-程序集-扩展-Microsoft.Office.Interop.Excel 3.封装的Exc ...

  5. 如何解决winows启动后出现grub?

    village :村庄, 村民 villa: 别墅 setting: 设置; ** 环境, 背景, 布置, 布局, 底座 what's the setting of the villa like? h ...

  6. Memcached基础知识

    主要内容: Memcached基本的工作原理 Memcached的两阶段哈希 Memcached的数据存储方式 Memcached新建Item分配内存过程 Memcached的数据过期方式 Memca ...

  7. VTK初学一,c_Line_CellArray线段的CellArray绘制

    VTK窗口默认坐标方向: #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE ...

  8. jquery Ajax跨域调用WebServices方法

    由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...

  9. iOS 8 牛刀小试

    iOS 8 牛刀小试 1.UIWindow的bounds发生变化(Window本身发生了旋转) iOS 7之前Window的bounds不会随着方向而变化,但是到了iOS 8以后,随着设备方向的旋转, ...

  10. JSP中根据不同的条件显示不一样的格式

    在做项目中遇到这样的场景: 当查询到记录时,需要将记录的字段作为下拉列表,让用户选择使用,即显示的是下拉列表. 当没有查询到记录时,则让用户手工填写该值,即显示的是文本框. 前段jsp使用if标签如下 ...