《JavaScript DOM编程艺术》学习笔记

最新推荐文章于 2022-02-02 05:05:18 发布

置顶谦玉

最新推荐文章于 2022-02-02 05:05:18 发布

阅读量187

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maq2ian0gqi1ang2/article/details/80303043

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

      一门编成语言，核心的语法只有一小部分；其他所有的高级特性要么借助于平台（如虚拟机），要么借助于内置其他语言包以核心语法为基础进行构建；所以学习编成语言，核心语法的学习至关重要；但是核心语法的学习，对于初学者来说，没有必要关注太细枝末节的东西，如果关注太过细致，则会导致对这门语言学习的信心的丧失。
    我个人在学习东西之前，都会去看一些别人提供的学习经验，学习路线图之类的东西，以期能够按着最快捷的方式入门；但是在入门java之前，我就因为在某乎看了别人的‘经验’，导致我拿着一本《java编成思想》作为入门书籍，看书看到我怀疑人生；有些人，他们有基础，有编程经验，有人指导，受过专业的训练，然后靠着类似于《java编成思想》之类的砖头书入门，然后他推荐给别人学习的时候也是这一套，他认为别人也可以靠着这样入门，殊不知别人可能没有他那么扎实的基础，也没有那么多的编程经验。
    学习任何东西，都应该是首先对整个知识体系有一个大概的了解，快速入门，多实践；然后依靠后续的长期的积累，去向知识体系中不断地填补细节的东西，而不应该是一上来就要学清楚每个细节；这也是我们面对任何一件复杂的事情时所应该采取的处理方式。
    我起初学习javascript使用的是《javascript权威指南》，看了服务端语言核心部分，讲的很清楚，但是太细节了，于我而言，书太厚了；所以在熟悉了语法规则后，我就选择使用《Javascript DOM编成艺术》这本书作为我后续的学习材料；这本书确实很好，我读了前面十章，此书以实践为导向，展示了如何操作文档；以下是我学习时做的一点笔记。

前面写这么多，其实都是我的反思，我当初看《java编程思想》，现在回想起来，我是被经验帖坑了。

1.查找节点：
document.getElementById()
document.getElementsByTagName()
element.getAttribute()
element.firstChild
element.lastChild
element.childeNodes
elment.firstChild.nodeType
2.修改已经存在节点属性
element.setAttribute()
element.firstChild.nodeValue
3.编程习惯
预留退路
分离javascript
向后兼容
对象检查
4.节点增加和删除
document.write()
缺点：无法做到分离javascript，必须在页面中调用才可
只适用于HTML文档
innerHtml
缺点：只适用于HTML文档，非标准
可以实现分离javascript
createElement()
创建元素节点
createTextNode()
创建文本节点
appendChild()
为节点添加子节点；节点树可由此方法进行组装；
insertBefore()
把一个新元素插入到一个现有元素的前面。
parentElement.inserBefore(newElement,targetElement);
5.javascript操作CSS
i)DOM style属性获取样式信息：
var property = element.style.property
可以获取返回HTML内嵌css,如果将css放在样式文件中，则无法通过此方式获取（在外部样式表中和文档的<head>部分提供的css不能进入style属性中，所以无法通过此方式获取），但是如果使用DOM设置了样式信息，就可以使用DOM style属性将这些设置的样式信息再次获取出来。
其中：property的某些字段表示与css中的不同，无论css中用多好连字符，在property中都使用驼峰方式表示，比如：css中font-familly 在property中则使用element.style.fontFamilly来获取；此外，某些字段获取到的值与css中的值的表示单位可能不同，如color，css中使用颜色编码，但是获取得到的时RGB表示。
ii)DOM style属性设置样式信息：
element.style.property = value; //value必须是字符串，否则运行会出错。
在什么情况下应该使用DOM style属性设置样式信息：
需要根据元素在节点树中的位置来设置样式信息
需要根据某种条件设置样式信息
对事件做出响应——某个事件触发样式改变
改变一个元素的className,而不是改变它的行内嵌样式*（如果该元素已经存在样式表，则可以使用字符串拼接的方式设置叠加样式）

常用代码：

function addLoadEvent(func)
{
    var oldOnLoad = window.onload;
    if(typeof oldOnLoad !== 'function')
    {
        window.onload = func;
    }
    else
    {
        oldOnLoad();
        func();
    }

}

function moveElement(elementID,final_x,final_y,interval)
{
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos === final_x && ypos === final_y) return true;
    xpos>final_x ? xpos-- : xpos++;
    ypos>final_y ? ypos-- : ypos++;
    elem.style.left = `${xpos}px`;
    elem.style.top = `${ypos}px`;
    var repeat = `moveElement('${elementID}',${final_x},${final_y},${interval})`;
    var clearMoveMent = setTimeout(repeat,interval);
}

function addClass(element,value)
{
    if(!element.className)
    {
        element.className = value;
    }
    else
    {
        element.className = `${element.className} ${value}`;
    }
}

/**
 * 在某个元素之后插入新元素
 * @param newElement
 * @param targetElement
 */
function insertAfter(newElement,targetElement)
{
    if(!newElement || !targetElement) return false;
    var parentElement = targetElement.parentNode;
    if(parentElement.lastChild === targetElement)
    {
        parentElement.appendChild(newElement);
    }
    else
    {
        parentElement.insertBefore(newElement,targetElement.nextSibling);
    }
}