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

随机推荐

B1/B2签证拒签
http://www.mcdvisa.com/html/News/USA_visa_news/201529/152917GE.html
clearInterval,setInterval,clearTimeout,setTimeout
setInterval("f()",1000) 每隔1秒就执行一次f() clearInterval 关闭clearInterval setTimeout("f() ...
源程序出现各种奇怪的符号P
依次展开Windows->Preferences->General->Editors->Text Editor 将右边的Show whitespace characters的复 ...
webuploader横向按钮样式
#picker{display: inline-block;line-height: 1.428571429;vertical-align: middle;margin: 0 12px 0 0;wid ...
小技能——markdown
如果常常要在电脑上写点东西,比如写笔记.做总结.写博客之类的,花一两个小时学会markdown还是很值的. markdown简介 markdown不是某个软件,而是一种标记语言,标记普通文本的格式,以 ...
jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 d ...
Android Studio-设置代码自动提示
None:代表模糊匹配(推荐). First Letter: 根据首字母进行匹配. All:与First Letter类似,不过匹配结果比First Letter多.
SVN Tree Conflict 的分析
所谓Tree Confict,就是至少有一个人修改了目录结构,包括文件或者文件所在目录的改名.删除.移动.然后Update或Merge的时候就报了Tree Conflict. 介绍一下概念Delete ...
angularjs DOM操作之jqLite篇
angular.element(el).find("input").attr({value:1}); * ## Angular's jqLite * jqLite provides ...
linux 打造man中文帮助手册
博客转自:http://my.oschina.net/hbzhangmao/blog/354533 学IT的同学都知道, Linux是一个好东西, 但初学者往往会因为太多的命令觉得头疼, 更头疼的是所 ...

Dom初

Dom初的更多相关文章

随机推荐

热门专题