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. MinGW: TOO MANY SECTIONS issue

    http://sourceforge.net/p/mingw-w64/mailman/mingw-w64-public/thread/509A38C6.6070807@doxos.eu/ MingGW ...

  2. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq

    angularjs 使用ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in ...

  3. Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  4. 使用hessian开发WebService,轻量级,更简单、快捷

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...

  5. mysql存储过程对900w数据进行操作测试

    新增索引:LTER TABLE `tablename` ADD INDEX `sdhid` (`createTime`) USING BTREE ;[SQL]ALTER TABLE `tablenam ...

  6. app的meta

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> < ...

  7. FireBug调试工具笔记

         Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件, 现属于Firefox的五星级强力推荐插件之一.它集HTML查看和编辑.Javascript控制台.网络状况监视 ...

  8. ELK日志分析系统（转）

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://467754239.blog.51cto.com/4878013/1700828 ...

  9. ECshop安装及报错解决方案总结

    一.安装ECshop ECShop是一款B2C独立网店系统 ,适合企业及个人快速构建个性化网上商店.系统是基于PHP语言及MYSQL数据库构架开发的跨平台开源程序.2006年3月推出以来1.0版以来, ...

  10. C#第一次的Hello World

    这个Hello World是最基础的,在程序默认生成的using System下,不用自己可以的去写using System. 我们要牢记compling and running和running wi ...