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.至于说如何体现出来,官网的教程很详 ...

随机推荐

How to save milliseconds to DB in NHibernate
We need to configure Timestamp in Mapping. eg. Map(x => x.ResponseDate).CustomType("Timestam ...
AutoMapper.EF6
https://github.com/AutoMapper/AutoMapper.EF6 Extensions for AutoMapper and EF6 This contains some us ...
Selenium 代码收集
[转载]使用Selenium2测试含有iframe的Ajax网页原文地址:http://www.cnblogs.com/hexin0614/archive/2012/03/24/2415670.h ...
ubuntu命令行打开html文件的方法
1.Ctrl+Alt+T可以打开shell,F11可以全屏显示,输入以下命令即可打开js17.html,并且指定浏览器,比如指定chrome, 复制代码代码如下: google-chrome js1 ...
[工具]Swagger-api接口文档描述
摘要工作中经常的用到webapi,之前都是提供的使用postman模拟请求的截图,非常的不方便,如果能在项目中集成一个在线查看接口说明的地方,肯定更方便更直观.在网上看到swagger这个组件,界面 ...
asp.net core csrf
如果用tag 比如 <form asp-action="Login" asp-controller="Account" method="post ...
ASO优化总结(基于网络分享的知识总结归纳)
如何优化应用标题? 注意关键字的长度,尽量保证每一个关键字小于10个字符.保持快速更新,因为每次更新,你都将有机会删除表现不佳的关键字以及增添新的关键字.在ASO中使用关键字的正确做法标题,并非越 ...
[转]Informatica vs SSIS
转自 http://blog.csdn.net/thy822/article/details/8489779 这篇文章, 我不能同意更多, 所以转在这里. Here is my thinking af ...
python 100例（持续更新）
1.题目:列表转换为字典. 程序源代码: 1 #!/usr/bin/env python 2 # -*- coding: UTF-8 -*- 3 4 i = ['a', 'b'] 5 l = [1, ...
R入门<二>-时间序列研究
续之前那篇随笔前天写完随笔后,很自豪的拿出来去跟带我入数据挖掘和SAS基础的大牛@八公炫耀,然后收获了一堆时间序列的材料,非常感谢大牛! ARIMA就是看图形,ACF和PACF,原理不需要知道,因为 ...

Dom初

Dom初的更多相关文章

随机推荐

热门专题