JS包括三部分:ECMAscript、DOM(文档对象)、BOM(浏览器对象)

一、DOM(文档对象)
DOM树
节点(元素、属性、标签、标记等都是节点)

二、访问节点

documment.getElementById()
documment.getElementsByTagName()
documment.getElementsByClassName()
//主流浏览器支持,IE6、7、8不兼容

三、节点访问关系
1、父节点parentNode
2、兄弟节点:
下一个兄弟:
nextSibling  //IE6、7、8认识
nextElementSibling  //其他浏览器认识
同理:
上一个兄弟
previousSibling  //IE6、7、8认识
previousElementSibling  //其他浏览器认识

兼容写法
var one=document.getElementById("one");
var div=one.nextElementSibling||one.nextSibling;//先普通浏览器再IE
div.style.backgroundColor="red";

3、子节点
firstChild
firstElementChild
兼容:one.firstElementChild||one.firstChild
lastChild
lastElementChild  同上

4、孩子节点
childNodes 选出全部的孩子嫡出
childNodes:标准属性,返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点
火狐、谷歌高版本会把换行也看作是子节点

利用 nodeType==1 时才是元素节点,通过这个来获取元素节点

5、children 选取所有的孩子,只包括元素节点(庶出)
IE6、7、8包含注释节点,这个要避免开,去掉注释

四、DOM节点操作
新建、插入、删除、克隆节点等等

1、创建节点
var div document.creatElement("li");//生成一个新的li标签

2、插入节点
(1)appendChild();添加孩子到某个盒子的最后面
(2)insertBefore(插入的节点,参照节点);两个参数必写
demo.insertBefore(test,childrens[0]);//放到第一个孩子的前面
如果第二个参数为null,则默认新生成的盒子放到最后面
demo.insertBefore(test,null);

3、移除节点
removeChild() ; //孩子节点
demo.removeChild(da);

4、克隆节点
cloneNode();
也就是复制节点
括号里面可以加参数,如果里面是true,深层复制,除了复制本盒子,还复制子节点
如果为false,浅层复制,只复制本节点,不复制子节点

案例:

1、孩子节点

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>孩子节点</title>
<script>
window.onload=function(){
//childNodes用法
/*var ul=document.getElementById("ul");
var childrens=ul.childNodes;//选择全部孩子
//alert(childrens.length);//7
for(var i=0;i<childrens.length;i++){
if(childrens[i].nodeType==1){
childrens[i].style.backgroundColor="blue";
}
}*/ //children用法
var ul=document.getElementById("ul");
var childrens=ul.children;//选择所有孩子,只有元素节点
alert(childrens.length);

}
</script>
</head>
<body>
<ul id="ul">
<li>123456</li>
<li>123456</li>
<li>123456</li>
</ul>
</body>
</html>

2、DOM节点操作

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点操作</title>
<script>
window.onload=function(){
var demo=document.getElementById("demo");
var childrens=demo.children;
//创建节点
var firstDiv=document.createElement("div");
//添加节点
demo.appendChild(firstDiv);
var test =document.createElement("div");
//children[0]就是xiongda
demo.insertBefore(test,childrens[0]);
//demo.insertBefore(test,null);//若无参照点,则为null,新添加的放到最后面 //移除节点
var da=document.getElementById("xiongda");
demo.removeChild(da); //复制节点
var last= childrens[0].cloneNode();
demo.appendChild(last);
demo.parentNode.appendChild(demo.cloneNode(true));
}
</script>
</head>
<body> <div id="demo">
<div id="one"></div>
<div id="xiongda"></div>
</div>
<!--<nav></nav>-->
</body>
</html>

第30天:DOM对象操作的更多相关文章

  1. 原生JS中常用的Window和DOM对象操作汇总

    一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...

  2. PHP原生DOM对象操作XML'代码'

    对于操作XML类型文件,PHP内置有一套DOM对象可以进行处理.对XML的操作,从创建.添加到修改.删除都可以使用DOM对象中的函数来进行. 创建 创建一个新的XML文件,并且写入一些数据到这个XML ...

  3. dom对象操作Html,Css

    HTML: 1.不要再文档加载完使用document.write,这样会创建新的dom对象,原来的元素将被覆盖. 2.获取元素,通过getElementbyID; getElementbyTag(&q ...

  4. PHP原生DOM对象操作XML的方法解答

    创建一个新的XML文件,并且写入一些数据到这个XML文件中. /** 创建xml文件*/ $info = array(array('obj' => 'power','info' => 'p ...

  5. jQuery Dom对象操作 增、删、改、复制、包裹

    1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...

  6. Js:DOM对象操作常用的方法和属性

  7. DOM对象操作html元素1

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  9. DOM、Window对象操作

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...

随机推荐

  1. WPF 应用程序资源、内容和数据文件

    MSDN相关介绍: http://msdn.microsoft.com/zh-cn/library/aa970494(v=vs.100).aspx 内容文件(Content Files)内容文件简单的 ...

  2. 【POJ2182】Lost Cows

    [POJ2182]Lost Cows 题面 vjudge 题解 从后往前做 每扫到一个点\(i\)以及比前面小的有\(a[i]\)个数 就是查询当前的第\(a[i]+1\)小 然后查询完将这个数删掉 ...

  3. LeetCode:39. Combination Sum(Medium)

    1. 原题链接 https://leetcode.com/problems/combination-sum/description/ 2. 题目要求 给定一个整型数组candidates[ ]和目标值 ...

  4. 使用apache cgi运行ruby脚本

    在ubuntu下 进入 /usr/lib/cgi-bin目录 新建文件 ruby.cgi 内容如下 #!/usr/bin/ruby print "Content-type: text/htm ...

  5. L011系统文件属性知识进阶详解小节

    L011系统文件属性知识进阶详解小节 这节课的内容相对来说较少,一上午加中午就听完了,现在总结一下,最后会有一个相关的面试题. 首先先附上一张图: 今天学习主要跟①和②有关,①为Inode 号 ②为文 ...

  6. unity share current game screen

    using UnityEngine; using System.Collections; using UnityEngine.UI; using System.IO; public class Tak ...

  7. path.resolve()和path.join()的区别

    path.join()  组装路径.该方法的主要用途在于,会正确使用当前系统的路径分隔符,Unix系统是/,Windows系统是\.路径字符中可以使用..或../进行相对路径的计算,其它路径表示符会被 ...

  8. Qt-QML-QML调用C++类

    QML用来做界面,在不考虑数据的请款下,那是溜溜的,但是,程序是没有不和后台数据交互的,但是了,QML在数据处理方面的效率又是不敢恭维的,这里就出现了QML负责前端界面,而后端使用JS或者C++了. ...

  9. 第四模块:网络编程进阶&数据库开发 第1章·网络编程进阶

    01-进程与程序的概念 02-操作系统介绍 03-操作系统发展历史-第一代计算机 04-操作系统发展历史-批处理系统 05-操作系统发展历史-多道技术 06-操作系统发展历史-分时操作系统 07-总结 ...

  10. Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式

    Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式 摘自Unity文档 EditorGUIUtility.AddCursorRect public static void AddCursorRect ...