盒子
盒子
文章目录
  1. 几个基本的DOM方法
    1. getElementById(id)
    2. getElementsByTagName(tagName)
    3. getElementByClassName(className)
    4. getAttribute(属性名)
    5. setAttribute(属性名,设置的内容)
  2. 几个属性
    1. nodeValue
    2. childNodes
    3. nodeType
    4. firstChild 和 lastChild
    5. parentNode
  3. 更改属性内容与更改节点值得对比
  4. 关于平稳退化
  5. 使用已有的DOM方法实现某些功能
    1. getElementsByClassName(node, classname)
    2. window.onload() 绑定多个函数(事件处理)
    3. insertAfter(newElement, targetElement)
  6. 动态创建标记的DOM方法
    1. createElement()
    2. appendChild()
    3. createTextNode()
    4. insertBefore()
    5. insertAfter()

《JavaScript DOM 编程艺术》读书笔记

几个基本的DOM方法

getElementById(id)

参数是HTML网页中标签的id属性的名称,

返回得到一个唯一的对应的对象。

getElementsByTagName(tagName)

参数是标签名

返回得到一个该标签的数组

getElementsByTagName(“body”);

getElementByClassName(className)

只有较新的浏览器才支持它。通常需要用已有的DOM方法来实现它。

参数是标签的class属性名

返回得到包含该类名的所有元素的一个数组

getAttribute(属性名)

参数是属性名,

返回该属性的内容

setAttribute(属性名,设置的内容)

参数是属性名,内容

可以修改该属性的内容。

上述中的

getElementById()

getElementsByTagName()

getAttribute()

setAttribute()

这些方法都是DOM Core 的组成成分。它们并不专属于JavaScript,支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非局限于处理网页,它们可以用来处理任何一种标记语言(如 xml)编写出来的文档。

几个属性

nodeValue

用于得到或更改一个节点的值

比如可用于获取\

标签包含的文本值,并修改。

childNodes

获取任何一个元素的所有子元素。

返回一个数组

PS: childNodes 属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们也全都包含在 childNodes 属性所返回的数组当中。

nodeType

该属性能让开发者知道自己在和哪种节点打交道。

该属性共有12种可取值,但其中仅有3种具有使用价值。

元素节点 的nodeType属性值为1

属性节点 的nodeType属性值为2

文本节点 的nodeType属性值为3

firstChild 和 lastChild

顾名思义,可获得任何一个元素的第一个子元素和最后一个子元素。

parentNode

获取某元素的父元素

更改属性内容与更改节点值得对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function showImage(whichpic) {

var source = whichpic.getAttribute("href");

var place = document.getElementById("placeholder");

place.setAttribute("src", source);

var text = whichpic.getAttribute("title");

var description = document.getElementById("description");

description.firstChild.nodeValue = text;

}

关于平稳退化

补充: 很多人说现在没有太大的必要考虑这些,我因为还没深入,作保留意见。

ps: 2019-01-14/主方向为后端的话,暂时知道前端有这么个东西就行了…


“如果 Javascript 功能被禁用,将会如何?”

基于这个思考,在代码中要尽可能地考虑到用户因为各种原因 而不能使用Javascript 功能的情况。

最好在代码的开头部分做好判断,例如:

1
2
3
4
5
6
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("description")) return false;
......
}

避免用一层又一层的花括号,这样会掩盖掉核心的代码

1
2
3
4
5
6
7
8
9
function prepareGallery(){
if(document.getElementsByTagName){
if(document.getElementById){
if(document.getElementById("description")){
......//核心代码
}
}
}
}使用已有的DOM方法实现某些方法

使用已有的DOM方法实现某些功能

getElementsByClassName(node, classname)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i = 0; i < elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}//end

node : DOM树中的搜索起点
classname : 搜索的类名
不适用于查找多个类名

window.onload() 绑定多个函数(事件处理)

1
2
3
4
5
6
7
8
9
10
11
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

编写这样的函数是为了应对页面加载完毕时执行函数过多的情况。

无论需要绑定多少个函数至window.onload,只需写如下代码

1
2
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

当然,在需要绑定的函数不是很多的情况,使用匿名函数可以方便地绑定。

1
2
3
4
window.onload = function(){
firstFunction();
secondFunction();
}

insertAfter(newElement, targetElement)

DOM本身并没有提供把一个节点插入另一个节点之后的方法。

1
2
3
4
5
6
7
8
function insertAdter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

动态创建标记的DOM方法

createElement()

创建一个元素

下面这条语句将创建一个p元素:

document.createElement(“p”);

appendChild()

把新创建的节点插入某个文档的节点树,作为该节点树某个节点的子节点。

parent.appendChild(child);

createTextNode()

创建一个文本节点

例如\

标签包围的内容

insertBefore()

调用语法:parentElement.insertBefore(newElement, targetElement)

  • 新元素:你想插入的元素(newElement)
  • 目标元素:你想把新元素插到哪个元素(targetElement)之前
  • 父元素:目标元素的父元素(parentElement)

在使用过程中不必明确父元素到底是哪个,因为targetElement元素的parentNode属性就是父元素。

insertAfter()

DOM本身并没有提供这样的方法,可以用已有的方法编写一个。

如上…

用js代码操作网页中的css元素,最好不要直接改,而是通过在css文件里设置类,然后通过修改元素的类名达到操作修改css的效果。即通过更换class来更换(设置)样式。