DoM
浏览器支持：
IE： 10%
FF： 99%
Chrome： 60%
在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNotes只算元素节点，而不算文本节点。
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
在IE9和Chrome中ul的childNotes个数为9个，而在IE6-8中为4个。
文本节点：noteType值为3
元素节点：noteType值为1
如果要对ul中的li的样式进行操作，并且还要对不同版本的浏览器具有一定的兼容性，可以使用noteType实现。
for(var i=0; i<oUl.childNodes.length; i++){
if(1 == oUl.childNodes[i].nodeType)//说明是元素节点
{
oUl.childNodes[i].style.background='red';
}
}
只包含元素节点，不包多文本节点（也是兼容的）。
for(var i=0; i<oUl.children.length; i++){
oUl.children [i].style.background='red';
}
<ul>
<li>12<a href="javascript:;">隐藏</a></li>
<li>23<a href="javascript:;">隐藏</a></li>
<li>34<a href="javascript:;">隐藏</a></li>
<li>45<a href="javascript:;">隐藏</a></li>
</ul>
var aA = document.getElementsByTag("a");
for(var i=0; i<aA.length; i++){
aA[i].onclick=function(){
this.parentNode.style.display = "none";
//this指向的应该是节点aA[i]，而他的parentNode应该是li，然后实现隐藏
}
}
css:绝对定位和相对定位？绝对定位的元素，根据谁定位？
css中绝对定位的元素是根据已定位的父级元素来进行定位的，如果他的第一父级元素没有绝对定位，那么就会寻找他父级的父级元素，直到找到一个已定位的元素为止（最外层就根据body来进行定位。）
绝对定位和相对定位的区别：绝对定位的参照物是已被定为的父级元素；而相对定位的参照物是自身原来的位置，准确的说是未设置left和top值的位置。
<div id="div1">
<div id="div2"></div>
</div>
设置样式1：父级元素div1没有被定位，所以改变div1的位置，div2不会跟着移动，因为div2绝对定位的参照物是div1的父级body。
<style>
#div1 {width: 200px; height:200px; background: red; margin:20px;}
#div2 {width: 100px; height:100px; background: yellow; position: absolute; left:40px; top: 23px;}
</style>
设置样式2：父级元素div1已被定位，div2的参照物就是div1的位置，所以该变div1的位置，div2也会跟着移动。
<style>
#div1 {width: 200px; height:200px; background: red; margin:20px; position:relative; left: 0px; top: 20px;}
#div2 {width: 100px; height:100px; background: yellow; position: absolute; left:40px; top: 23px;}
</style>
offsetParent可以用来获取一个元素用来定位的父级，它指向的是一个对象。
<script>
var oDiv = document.getElementById("div2");
alert( oDiv.offsetParent);
</script>
- firstChild和firstElementChild
获取子元素中第一个元素。
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
var oUl = document.getElementById("ul1");
if( oUl.firstElementChild){//低版本的IE6-8不能识别标记firstElementChild，但可以识别firstChild
oUi.firstElementChild.style.background="red";
}else{//高版本的浏览器能识别的标记firstElementChild，而不能识别firstChild
oUi.firstChild.style.background="red";
}
</script>
获取尾节点：lastChild、lastElementChild
获取兄弟节点：nextSibling、nextElementSibling以及previousSibling、previousElementSibling
与此类似，但均有兼容性问题。
元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式
DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
通过元素的className，选出自己想要的元素。
<body>
<ul id="ul1">
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</body>
<script>
function getByClass(oParent, ClassName){
var oElem = oParent.getElementsByTag("*");
var aResult=[];
for(var i=0; i<oElem.length; i++){
if(oElem[i].className == "box"){
aResult.push( oElem[i] );
}
}
return aResult;
}
window.onload=function(){
var oUl = document.getElementById("ul1");
var aBox = getByClass(oUl, "box");
for( var i=0; i<aBox.length; i++){
aBox[i].style.background = "red";
}
}
</script>
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- Javascript DOM 编程艺术（第二版）读书笔记——DOM基础
1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父) child(子) sibling(兄弟) ...
- JavaScript笔记:DOM基础
一.什么是DOM DOM全称是document object model(文档对象模型).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.通俗的说D ...
- js学习笔记--dom部分(一)
js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Javaweb学习笔记——（三）——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...
- python学习笔记十三 JS，Dom（进阶篇）
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...
随机推荐
- JavaScript基本概念（操作符）
一元操作符 一元操作符在处理所有的非数值时,相当于将该值经过Number()转换成数值,如 +"12" 将把 "12" 字符串转换为数字. 位操作符 负数在计算 ...
- Git客户端使用
1.下载安装包 git: https://git-for-windows.github.io/index.html tortoisegit: https://download.tortoisegit ...
- C# 单向链表数据结构 (一)
单向链表数据结构是有节点组成,每个节点包含两部分,第一部分为存储数据,第二部分为指向下一个节点的指针.注意,有两个特色的节点,分别为“头节点”和“尾节点”,头节点本身没有数据,只存储下一个节点的指针, ...
- rhel6.4 配置本地yum的源
1 创建rhel-debuginfo.repo,如果有则先备份再删除 cd /etc/yum.repos.d rm rhel-debuginfo.repo vi rhel ...
- POJ 2774 Long Long Message&&HDU 1403 Longest Common Substring&&COJ 1203
后缀数组的买1送2题... HDU的那题数据实在是太水了,后来才发现在COJ和POJ上都是WA..原因在一点:在建立sa数组的时候里面的n应该是字符串长度+1....不懂可以去看罗大神的论文... 就 ...
- UITabBarController 笔记(二) ViewController中加UITabBarController
新建一个简单视图iOS工程,在ViewController的viewDidLoad中代码如下 - (void)viewDidLoad { [super viewDidLoad]; // Do any ...
- Sizzle一步步实现所有功能（基本筛选）
第二步:实现:first,:last,:eq(),even,odd,:gt(),:lt(); :header,:root,:taget; :not(). ;(function( window ){ v ...
- CRM odata方法如何使用$top
odata方法 $top $top1 取1个 ￥top100取100个,放在$select前,中间用&符号隔开. 例如: var activeserviceReq = "/xrmse ...
- CentOS7配置VNC Server
CentOS7与6有些许变化,感觉有点不太适应. Step 1: 安装tigervnc server 和 X11 fonts: [root@mdrill ~]# yum install tigervn ...
- DOM缘起
DOM是现在按W3C标准的浏览器均实现的标准.HTML.CSS.DOM共同在结构.表现.交互上共同支撑起一个页面.当然,必须以用户为中心.平稳退化.逐渐增强.DOM的操作是通过JS来实现的.JS最初在 ...
