JavaScript 学习笔记（三）-- DOM

本文主要是介绍JavaScript 学习笔记（三）-- DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

DOM

Document Object Model

用来操作 html 和 xml 功能的一类对象的集合

document 代表整个文档

选择器

getElementById()

通过元素的 id 属性值选择

var div =  document.getElementById('only');

定义在了 Document.prototype 上

ie8以下的浏览器，不区分 id 大小写，而且 name 和 id 一样的元素，也可以选出来

getElementsByTagName() *

通过标签名的方式选择所有，放到一个类数组中

var div =  document.getElementsByTagName('current')[0];

定义在了 Document.prototype 和 Element.prototype 上

var div = document.getElementsByTagName('div')[0];
var span = div.document.getElementsByTagName('span')[0];

还可以使用 通配符 * 选择全部选择器；

无任何兼容性问题，较为常用

getElementsByName()

t通过 name 属性值选择所有，放到一个类数组中

var div =  document.getElementsByName('current')[0];

定义在了 HTMLDocument.prototype 上，即 XML 不能可用

name 并不是在所有标签内都好使

getElementsByClassName()

通过类名 class 选择所有，放到一个类数组中

var div =  document.getElementsByClassName('current')[0];

ie8和ie8以下的ie版本中没有

querySelector()

选一个

var strong = document.querySelector('div > span strong.demo');

querySelectorAll()

选一组

var strong = document.querySelectorAll('div > span strong.demo');

以上两个 query 的选择器的缺点：

1. 在ie7 和 ie7以下版本中没有
2. 不是实时的，选出来的是静态的，相当于选出来的就是个副本，元素发生改变不会发生改变

遍历节点树

获取节点

均无兼容性问题

parentNode

一个元素只有一个父节点，document 就是最高的

null > document > html > body > …

childNodes *

获取一个元素所有的子节点，包括 文本、注释、属性、元素等

firstChild

获取元素的第一个子节点

lastChild

获取元素的最后一个子节点

nextSibling

获取元素的后一个兄弟节点

previousSibling

获取元素的前一个兄弟节点

获取元素节点

除 children 无兼容性问题外，其他的均是 ie9及ie9以下不兼容

parentElement

父元素节点，没有到 document

null > html > body > …

children *

获取元素的所有元素子节点

childElementCount

元素的元素字节点的个数

node.childElementCount === node.children.length

firstElementChild

第一个元素子节点

lastElementChild

最后一个元素子节点

nextElementSibling

上一个兄弟元素节点

previousElementSibling

后一个兄弟元素节点

// 返回指定兄弟节点
function retSibling(e, n) {
    while (e && n) {
        if (n > 0) {
            if (e.nextElementSibling) {
                e = e.nextElementSibling;
            } else {
                for (e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
            }
            n--;
        } else {
			if (e.previousElementSibling;) {
	            e = e.previousElementSibling;
            } else {
                for (e = e.previousElementSibling; e && e.nodeType != 1; e = e.previousSibling);
            }
        }
    }
    return e;
}

节点

属性

节点的四个属性：

nodeName

• 元素的标签名，以大写形式表示，只读

nodeValue

• 文本节点 和 注释节点的文本内容，可读写
• 只有 Text节点 和 Comment节点

nodeType *

• 该节点的类型，只读

// 自定义 获取所有元素子节点
function retElementChild(node) {
    // no children
    var temp = {
            length : 0,
            push : Array.prototype.push,
        	splice : Array.prototype.splice
        },
        child = node.childNodes,
        len = child.length;
    for(var i = 0; i < len; i++) {
        if (child[i].nodeType === 1) {
            temp.push(child[i]);
        }
    }
    return temp;
}

attributes

• Element 节点的属性集合

方法

hasChildNodes()

判断元素是否具有子节点，返回 boolean值

分类

后面的数字是 nodeType 属性返回的值

元素节点 – 1

属性节点 – 2

文本节点 – 3

注释节点 – 8

document – 9

DOM结构树

document --> HTMLDocument --> Document --> Node --> EventTarget --> Object

• document.documentElement 指代的是 html
• HTMLDocumnet.head 指代的是 head
• HTMLDocumnet.body 指代的是 body

domTree + cssTree = rangerTree

重排（reflow）：整个界面进行重构，效率很低，要尽量避免

1. dom节点的删除，添加
2. dom节点的宽高变化，位置变化，display none --> block
3. offsetWidth offsetLeft --> 获取实时数据，也会触发重排

重绘（repaint）：效率相对消耗比较少，对应位置改变

DOM基本操作

增

createElement() *

创建元素节点，括号内写标签名

var div = document.createElment('div');

createTextNode()

创建文本节点

var text = document.createTextNode('AgoniLay');

createComment()

创建注释节点

var comment = document.createComment('This is AgoniLay！')

插

appendChild() *

将节点添加到调用者中，类似于 push

var div = document.getElementsByTagName('div')[0];
var text = document.createTextNode('AgoniLay');
div.appendChild(text);

将已在界面内的节点添加到别的中去

是剪切效果，原先的会被剪切到要添加的地方

insertBefore() *

将要插入的 插入到元素中去，并且插入到 第二个参数所代表元素 之前

div.insertBefore(strong, span);

insertAfter() 自定义

自己封装 insertAfter() 方法

Element.prototype.insertAfter = funtion (targetNode, afterNode) {
    var beforeNode = afterNode.nextElementSibling;
    if (beforeNode == null) {
        this.appendChild(targetNode);
    } else {
        this.insertBefore(targetNode, beforeNode);
    }
}

删

removeChild() *

父节点剪切出自己的子节点，作为返回值返回出来

remove() *

自己将自己本身销毁，无返回值

替换

replaceChild()

由父节点调用，用新的 替换 旧的，并将旧的返回出来

parentNode.replaceChild(new, origin)

节点属性

innerHTML() *

改变一个元素中的 html 内容

div.innerHTML = '123'; // 会将原来里面的所有值覆盖
div.innerHTML += '456'; // 先取值，在追加 --> 可读可写

会识别括号内的一系列 html 文本

innerText()

读写标签内的文本，但是会覆盖

innerText() 方法 老版本火狐不兼容，火狐中有 textContent() 方法，但此方法 老版本ie 不好使

节点方法

setAttribute()

设置行间属性

div.setAttribute('class', 'demo');
// div --> <div class="demo"></div>
div.setAttribute('id', 'only');
// div --> <div class="demo" id="only"></div>

getAttribute()

取到行内属性

div.getAttribute('id'); // --> only

className()

可以读写元素节点的 class 属性

脚本化CSS

读写css属性

dom.style *

• 如果属性名中带有 - ，则换成小驼峰式：background-color --> backgroundColor
• 碰到 float 这样的保留字属性，尽量前面加 css：float --> cssFloat
• 复合属性建议拆解：border: 1px soild red; --> borderWidth="1px"; borderStyle="soild"; borderColor="red"
• 可读可写，但只能读取到行间样式，写也是添加到行间，无兼容性问题
• 只有这一种方法可以写入 css 值

getComputedStyle() *

获取当前元素所展示出的一切 css 属性的显式值（最终显示出来的，包括默认值）

window.getComputedStyle(ele, null)[prop];

• 只读

• 返回的样式都是绝对值

  • 颜色：rgb 形式
  • 尺寸：px 单位

• 第二个参数 null 的作用：获取伪元素的属性表

  var div = document.getElementByTagName('div')[0];
  window.getComputedStyle(div, "after");
  

• IE8及IE8以下不兼容

  • div.currentStyle --> CSSStyleDeclaration

兼容性问题解决：

function getStyle(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    } else {
        return elem.currentStyle[prop];
    }
}

这篇关于JavaScript 学习笔记（三）-- DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！