Dom初

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初的更多相关文章

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标签如下 ...

Dom初

Dom初的更多相关文章

随机推荐

热门专题