JavaScript的一些基础性知识 (4)

所谓的DHTML就是将浏览器中常用的对象和HTML中的常用标签用JS对象表示，并在这些对象上提供属性和方法，从而实现通过操作这些JS对象来操作浏览器及浏览器中展示的页面内容的技术，从而将原来静态的HTML变为了可以通过JS操作的能动的页面，即动态HTML，DHTML。

现代的主流浏览器都支持DHTML，所以我们只要学习DHTML相关的技术，就可以在任意主流浏览器中通过JS技术操作HTML页面了。

4.1.2. BOM和DOM

DHTML分为BOM和DOM。

其中BOM是Browse Object Modle 即浏览器对象模型，其中封装了浏览器操作相关对象。

DOM是Document Object Modle 即文档对象模型，将整个HTML文档按照文档结构组织成了树形结构。

4.2.    BOM 4.2.1. Window 对象

代表当前浏览器窗口的对象。是这个浏览器运行环境，所以调用其属性和方法时，可以省略window.

子对象

    document

    history

    navigator

    location

方法

    alert

    confirm

    prompt

    close

    setInterval

    clearInterval

事件

    onload

4.2.2. history对象

代表浏览器的浏览历史记录。

属性

Length

方法

Back

Forward

Go

4.2.3. location

代表当前浏览器地址栏

属性

Href

方法

Reload

4.2.4. navigator

属性

appName

4.3.    DOM 4.3.1. 获取对象

根据id获取页面中的元素

document.getElementById(“xxx”);

    根据name获取页面中的元素

document.getElementsByName(“xxx”);

    根据标签名获取页面中的元素

document.getElementsByTagName(“xxx”);

4.3.2. 进行增删改查

在父节点上增加子节点

parentNode.appendNode(childNode);

在父节点上删除子节点

parentNode.removeChild(childNode)

直接移除自己,但是只是移除自己,子孙不移除,也可以在此方法中传入一个true表明在删除自己的同时,子孙也被移除

childNode.removeNode();

childNode.removeNode(true);

凭空创建节点

var tag = document.createElement("tagName");

var attr = document.createAttribute("href");

设置属性

tag.setAttributeNode(attr);

替换子节点

parentNode.replaceChild(newChild,oldChild);

克隆节点

var ele2 = ele.cloneNode();//只克隆当前元素

var ele2 = ele.cloneNode(true);//克隆当前元素包括子元素

 

4.3.3. 修改样式

方式一：通过class属性修改样式

document.getElementById("tagName").className =”newClzName”;

方式二：直接修改css样式

tagEle.style.stylename = “stylevalue”

5.     EasyMall中的Dom编程 5.1.    用户注册的表单校验

5.1.1. 用户注册的表单校验

如图-1所示：

 

图-1

5.1.2. 购物车页面JS实现

如图-2所示：