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. Unity3D热更全书

    http://www.cnblogs.com/crazylights/p/3897742.html

  2. sn 密钥注册

    ::打开开发人员命令提示符输入一下内容与证书密码sn -i CanChou.snk.pfx VS_KEY_4B89A33EE2B53C07

  3. webform中使用webapi,并且使用autofac

    private void AutofacIoCRegister() { HttpConfiguration config = GlobalConfiguration.Configuration; if ...

  4. jQuery监听键盘事件及相关操作使用教程

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...

  5. Spring利用JDBCTemplate实现批量插入和返回id

    1.先介绍一下java.sql.Connection接口提供的三个在执行插入语句后可取的自动生成的主键的方法: //第一个是 PreparedStatement prepareStatement(St ...

  6. [Exchange]使用EWS托管API2.0同步邮箱

    你可以通过Exchange Web Serivice(EWS)托管API去检索从一个给定的时间点,文件夹中有变化的列表中的项. 客户端可以使用SyncFoldersItems方法,同步服务端的项目,你 ...

  7. firefox如何卸载插件plugins和临时文件夹

    下载原版的 英文版的 firefox 会看到 openH264 video codec Plugin和microsoft DRM (digit rightcopy manager 数字版权管理)等等插 ...

  8. php apache用户写文件夹权限设置

    php一般是以apache用户身份去执行的,把apache加入到存储你文件的父文件夹属组里去,然后改该父文件夹权限为775,这样属组成员就有写的权限,而apache属于这个组就可以改写该目录下所有文件 ...

  9. web.xml配置解释

    web.xml中配置的加载优先级:首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter.最终得出的 ...

  10. 第二章平稳时间序列模型——ACF和PACF和样本ACF/PACF

    自相关函数/自相关曲线ACF   AR(1)模型的ACF: 模型为: 当其满足平稳的必要条件|a1|<1时(所以说,自相关系数是在平稳条件下求得的):          y(t)和y(t-s)的 ...