EasyDemo*JavaScript常用内置对象part4

一、JavaScript常用内置对象

1. document对象

1.1DOM操作-查询

1.1.1查询节点

*如果需要操作HTML元素，必须首先找到该元素

*查询节点

-通过id查询

-通过层次(节点关系)查询

-通过标签名称查询

-通过name属性查询

1.1.2根据元素ID查找节点

*方法：document.getElementById()

-通过指定的ID来返回元素节点，忽略文档的结构

-查找整个HTML文档中的任何HTML元素

-如果ID值错误，则返回null

1.1.3根据层次查找节点(空白-空格---注意对比上面两图)

*parentNode、firstChild、lastChild

-遵循文档的上下层次结构，查找单个节点

*childNodes

-遵循文档的上下层次结构，查找多个节点

*previousSibling

-前一个同级节点

*nextSibling

-后一个同级节点

1.1.4根据标签名查找节点

*getElementsByTagName():根据指定的标签名称返回所有的元素

-忽略文档的结构

-查找整个HTML文档中的所有元素

-如果标签名称错误，则返回长度为0的节点列表

*返回一个节点列表(数组)

-使用节点列表的length属性获取个数

-[index]：定位具体的元素

1.1.5根据name属性查找节点

*getElementsByName():根据标签的name属性的值进行查询

1.2DOM操作-增加

1.1.1创建新节点

*document.createElement(elementName)

-elementName:要创建的元素标签名称

-返回新创建的节点

*设置节点信息

1.1.2添加新节点

*parentNode.appendChild(newNode)

-追加：新节点作为父节点的最后一个子节点存在

*parentNode.insertBefore(newNodek,refNode)

-refNode:参考节点，新节点位于此节点之前

1.3删除节点

*node.removeChild(childNode)

-删除某个子节点

-childNode必须是node的子节点

*childNode.parentNode.removeChild(childNode)