Java教程

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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!