js学习总结：DOM节点二（dom基本操作）
一、DOM继承树
DOM——Document Object Model
DOM定义了表示修改文档所需要的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml的一类厂商定义，也有人称DOM是对HTML以及xml的标准编程接口。
继承树模型图：
1.document继承于HTMLDocument,而HTMLDocument继承于Document;
2.文本节点对象Text与注释节点对象Comment继承于CharacterData
3.在Element节点下其实存在两个子节点，除了HTMLElement节点以外还有一个XMLElement节点。
二、DOM的基本操作
1.getElementById方法定义在Document.prototype上，也就是说Element节点上不能调用这个方法。
2.getElementsByName方法定义在HTMLDocument.prototype上，即非HTML标签不能使用。
3.getElementsByTagName方法定义在Document.prototype和Element.prototype上。
<div>
<span>a</span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = div.getElementsByTagName("span")[0];
console.log(span);
</script>
上面示例的代码中获取元素的方法看名称好像是同一个，其实不然，获取div的getElementsByTagName是由document对象向父级的父级Document原型获取的。而获取span的getElementsByTagName是Element对象（准确说应该是HTMLElement对象）div从父级的父级Element原型上获取的。
4.HTMLDocument.prototype上定义了一些常用的属性，body、head分别指向html文档中的<body>、<head>标签。也就是说在需要获取<body>、<head>标签时不再需要调用获取元素节点的方法，而是可以直接的通过document上的body和head的属性就可以了。
var body = document.body;
var head = document.head;
如果这两行代码在全局作用域上，这两行代码都是多此一举，因为全局作用域就是就是document。可以直接使用这两个属性。
5.Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素。
6.getElementsByClassName、querySelectorAll、querySelector在Document.prototype和Element.prototype中均有定义。
三、关于DOM节点操作的一些习题
1.遍历元素节点树
var fChildNode = function(node){
var child = node.childNodes,
childText = "",
len = child.length;
for(var i = 0; i < len; i++){
if(child[i].nodeType == 1){
childText += child[i].nodeName + " ";
if(child[i].childElementCount > 0){
fChildNode(child[i]);
}
}
}
console.log(childText);
}
//这里需要注意不要使用内置的children来直接获取子元素节点，IE9以下不兼容
//chidElementCount在很多手册上都找不到，这个属性是用来获取元素的子元素个数的
2.封装函数，返回元素e的第n层祖先元素节点
var retParent = function(elem,n){
while(elem && n){
elem = elem.parentNode;
if(elem.nodeType == 1){
n --;
}
}
return elem;
}
//这里注意不要使用parentElement这个属性，IE9以下不兼容
3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己
function retSibling(elem,n){
while(elem && n){
if(n > 0){
if(elem.nextElementSibling){
elem = elem.nextElementSibling;
}else{
elem = elem.nextSibling;
for(elem = elem.nextSibling; elem && elem.nodeType != 1; elem= elem.nextSibling);
}
n --;
}else{
if(elem.previousElementSibling){
elem = elem.previousElementSibling;
}else{
for(elem = elem.previousSibling; elem && elem.nodeType != 1; elem = elem.previousSibling);
}
n ++;
}
}
return elem;
}
4.写一个node.retChildren方法，功能与node.children方法一致
function retChildren(){
var children = this.childNodes;
var len = chileren.length;
var temp = {
push:Array.prototype.push,
splice:Array.prototype.splice
}
for(var i = 0; i < len; i++){
if(children[i].nodeType == 1){
temp.push(children[i]);
}
}
return temp;
}
5.在原型上封装一个hasChildren方法用来判断元素是否含有子元素
Element.prototype.myHasChildren = function (){
var children = this.childNodes;
var len = children.length;
for(var i = 0; i < len; i++){
if(childern.nodeType == 1){
return true;
}
}
return false;
}
四、增加与插入节点
创建元素节点：document.createElement();
创建文本节点：docuemtn.createTextNode();
创建注释节点：document.createComment("注释内容");
元素内插入节点：element.appendChild(插入的对象);— —类似剪切操作
在元素下的子节点b前面插入a节点：element.insertBefore(a,b);
五、删除与替换节点
在某个元素节点下移除，该方法会返回被移除的节点：element.removeChild(node);
删除元素节点自身：remove();
用新的节点new替换原来的origin节点：element.replaceChild(new,origin);
六、Element对象的一些属性
读写节点内容操作：innerHTML;— —以字符串的方式
读写节点文本内容操作：innerText;— —火狐不兼容
textContent;— —老版本IE不好使
七、关于DOM节点增删改的一些练习
1.请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法和属性。
var div = docuemnt.createElement("div");
var p = document.createElement("p");
var text = document.createTextNode("我最帅");
div.setAttribute("class","slogan");
div.setAttribute("class","example");
p.appendChild(text);
div.appendChild(p);
2.封装函数insertAfter();功能类似insertBefore();
即在元素节点下的一个子节点后面插入一个元素节点
Element.prototype.insertAfter = function(targetNode,afterNode){
for(afterNode = afterNode.nextSibling; afterNode && afterNode.nodeType != 1;afterNode = afterNode.nextSibling);
if(afterNode.type != 1){
this.appendChild(targetNode);
}else{
this.insertbefore(targetNode,afterNode);
}
}
3.将目标节点内部的节点顺序逆序。
//不兼容IE写法
Element.prototype.reversedChild = function(){
var children = this.children;
var len = children.length;
for(var i = len; i > 0; i--){
this.appendChild(children[i]);
}
}
//兼容IE写法
Element.prototype.reversedChild = function(){
var childNodes = this.childNodes;
for(var i = childNodes.length; i > 0 ; i--){
if(childNodes.nodeType == 1){
this.appendChild(childNodes[i]);
}
}
}
js学习总结：DOM节点二（dom基本操作）的更多相关文章
- D3.js学习笔记（一）——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
- js学习笔记之日期倒计时DOM操作
1.访问html元素 getElementById() 方法 返回对拥有指定 id 的第一个对象的引用,只有dom对象有效 getElementsByName() 方法 返回指定名称的对象集合 g ...
- JS学习笔记（一）DOM事件和监听
将事件绑定到元素身上的三种方法: 1.HTML事件处理程序(不推荐使用) 1 <a onclick="hide()"> 2.传统的DOM事件处理程序 即在目标DOM事件 ...
- DOM节点(二)：操作节点
appendChild() 用于向childNodes列表的末尾添加一个节点. var returnedNode = someNode.appendChild(newNode); 如果传入的节点已经是 ...
- Vue.js学习使用心得（二）——自定义指令
自定义指令 除了核心功能默认内置的指令,Vue 也允许注册自定义指令. 自定义指令可以定义全局指令,也可以定义局部指令. 使用 directives 选项来自定义指令. 定义全局指令: <div ...
- JS学习笔记：（二）回流和重绘
在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...
- js学习笔记16----父节点的操作
1.元素.parentNode : 只读属性,获取当前元素的父节点. 2.元素.offsetParent : 只读属性,获取离当前元素最近的一个有定位属性(position为relative或者abs ...
- js学习笔记15----子节点和兄弟节点的操作
1.元素.firstChild : 只读属性,第一个子节点 标准下:会包含文本类型的子节点. 非标准下:只包含元素类型子节点. 元素.firstElementChild : 只读属性,第一个元素子节点 ...
- js学习笔记10----字符串的基本操作
1.字符串的基本操作如下: 定义字符串: var str = "Hello World!" 字符串的基本操作如下: str.length-----返回字符串长度,这里返回12 st ...
随机推荐
- luogu P2680 运输计划 (二分答案+树上差分）
题目背景 公元 20442044 年,人类进入了宇宙纪元. 题目描述 公元20442044 年,人类进入了宇宙纪元. L 国有 nn 个星球,还有 n-1n−1 条双向航道,每条航道建立在两个星球之间 ...
- 【CodeForces 717C】Potions Homework
BUPT 2017 summer training (for 16) #1G 题意 每个人有一个懒惰值,每个任务有个难度,一开始每个人的任务和懒惰值都为\(a_i\),完成任务时间是懒惰值乘以难度,现 ...
- SetCapture() & ReleaseCapture() 捕获窗口外的【松开左键事件】: WM_LBUTTONUP
今天在窗口上绘图的时候,遇到一个问题:在特殊情况下,当用户在窗口中按下鼠标左键,然后移动到窗口外松开鼠标左键,这时程序中只能捕获到 WM_LBUTTONDOWN(按下) 和 WM_MOUSEMOVE( ...
- malloc() 和 calloc()有啥区别
calloc()在动态分配完内存后,自动初始化该内存空间为零(会将所分配的内存空间中的每一位都初始化为零). 而malloc()不初始化,里边数据是随机的垃圾数据. calloc(size_t n, ...
- dispatchEvent(AWTEvent) 分派事件
点一个按钮,显示的分派一个指定的事件给系统. 下面是一个例子,当点击close按钮时,分派一个new WindowEvent(this,WindowEvent.WINDOW_CLOSING)事件给系统 ...
- python(一)——初识与变量
---恢复内容开始--- #!/usr/bin/env python #-*- coding:utf8 -*- print('你好hello world') 第一行,主要用于Linux中环境变量,wi ...
- python3+django2 开发易语言网络验证（下）
第六步:网络验证服务器端项目上线部署 功夫不负有心人,终于部署成功啦! 前期准备: 项目名:netauth 系统:百度云服务器下的Ubuntu16.4 软件:xshell(无论如何想办法用这个跟服务器 ...
- 斯坦福大学公开课机器学习：advice for applying machine learning - deciding what to try next（设计机器学习系统时，怎样确定最适合、最正确的方法）
假如我们在开发一个机器学习系统,想试着改进一个机器学习系统的性能,我们应该如何决定接下来应该选择哪条道路? 为了解释这一问题,以预测房价的学习例子.假如我们已经得到学习参数以后,要将我们的假设函数放到 ...
- java linux sdk1.8
wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...
- 原生JS实现全选和不全选
案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...