DOM基础
 
DOM是什么
       答:文件对象模型(Document Object Model,简称DOM),DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构!来自网络
 
本节了解了下面知识点:
 
DOM节点
childNodes  nodeType
获取子节点
children
parentNode
例子:点击链接,隐藏整个li
offsetParent
例子:获取元素在页面上的实际位置
 
DOM节点(2)
首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
兄弟节点
有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
 
元素属性操作
第一种:oDiv.style.display=“block”;
第二种:oDiv.style[“display”]=“block”;
第三种:Dom方式
 
DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
 
用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数
 
 
 <script>

 function getByClass(oParent,ClassName)
{
var result=[];
var aEle=document.getElementsByTagName('*');//document 在这里应该可以用oUl代替,不知道是不是浏览器的问题,我这里老调试不出来
for(var i=0; i<aEle.length ; i++)
{
if(aEle[i].className==ClassName)
{
result.push(aEle[i]);
}
}
return result;
} window.onload=function ()
{
var oUl=document.getElementById('ull');
var oBox=getByClass(oUl,'box');
for(var i=0;i<oBox.length;i++)
{
oBox[i].style.background='red';
}
/*var aLi=document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
//oLi[i].style.background='red';
aLi[i].style.background='red'; }
}*/ } </script> <!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul> </body>

Javascript DOM 01 基础篇的更多相关文章

  1. DOM系列---基础篇

    DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树, ...

  2. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  3. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  4. JavaScript 面向对象(一) —— 基础篇

    学好JS的面向对象,能很大程度上提高代码的重用率,像jQuery,easyui等,这篇博客主要从细节上一步步讲JS中如何有效地创建对象,也可以看到常见的创建对象的方式,最后也会附上一些JS面向对象的案 ...

  5. javascript之Array基础篇

    整理了 Array 中很基础的要掌握的知识点,希望可以帮助初学者,也希望自己以后多用多融会贯通. 创建数组 使用Array构造函数: var a=new Array();//创建一个空数组 var a ...

  6. 【笔记】DOM探索基础篇(二)

    # 浏览器的渲染(HTML解析) ——参考: <前端必读:浏览器内部工作原理>http://kb.cnblogs.com/page/129756/ <谈谈DOMContentLoad ...

  7. JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  8. .net core 3.0 Signalr - 01 基础篇

    因为将signalr作为单独的站点,此处需要建立两个项目,一个专门用于signalr作为推送项目,一个客户端(实际的业务项目) ## 基础知识速览 ### Clients对象属性 | 属性 | 描述 ...

  9. 【笔记】DOM探索基础篇(一)

    #DOM探索(前端课程学习笔记)http://www.imooc.com/video/9502 DOM = document + object + model ECMAScript 编写js应遵守的标 ...

随机推荐

  1. HDU1325 &amp;&amp;poj1308 基础并查集

    和上一道小希的迷宫差点儿相同,可是在HDU上提交一直WA,POJ过了 HDU的数据太强了吧,强的我感觉数据有问题 题意:输入若干对点,推断是否是一颗树,转化过来也就是是否存在环 点数-边数=1,还要推 ...

  2. js中函数参数基本类型和引用类型的区别

    高级程序设计中说明,所有函数的参数都是按值传递的. 基本类型 向参数传递基本类型的值时,被传递的值会被复制给对应的命名参数 function addTen(num){ num=+10; return ...

  3. 【转】KVM/Installation

    [转]KVM/Installation Installation Pre-installation checklist Check that your CPU supports hardware vi ...

  4. md5 加密 swfit版

    在swift工程中随便建一个objective-c类,会提示你生成一个Bridging-Header,点YES,然后删除刚才建立的objective-c类,只留下[工程名]-Bridging-Head ...

  5. C++对象的销毁

  6. 【QT相关】文件、目录基础操作

    判断目录是否存在: QString proFile(t_path); proFile.append("/dir"); QFileInfo proFileInfo(proFile); ...

  7. TF-IDF算法-自动提取关键词汇

    引子:Automatic Keyphrase extraction 很长文章里面,如何自动提取关键词汇呢? 比如在<中国的蜜蜂养殖>的长文里面,我们准备提取它的关键词.首先一个思路, 那些 ...

  8. poj 2480 Longge's problem

    /** 大意: 计算f(n) = ∑ gcd(i, N) 1<=i <=N. 思路: gcd(i,x*y) = gcd(i,x) * gcd(i, y ) 所以gcd 为积性函数 又因为积 ...

  9. 谷歌三大核心技术(二)Google MapReduce中文版

    谷歌三大核心技术(二)Google MapReduce中文版  Google MapReduce中文版     译者: alex   摘要 MapReduce是一个编程模型,也是一个处理和生成超大数据 ...

  10. Hdu 1301 Jungle Roads (最小生成树)

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=1301 很明显,这是一道“赤裸裸”的最小生成树的问题: 我这里采用了Kruskal算法,当然用Prim算法也 ...