Javascript学习记忆内容 DOM对象 控制HTML元素

DOM对象 控制HTML元素

节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

1. 创建元素节点createElement
   document.creatElement(“p”); //创建一个以p命名的元素；

2. node.innerHTML(“some words”); //在元素node里边加入文字 some words；
   node.innerHTML // 元素的内容

3. document.getElementById("id"); //通过id值获取元素对象，id值是唯一的

4. getElementsByName()方法
   document.getElementsByName("name") //通过name值获取元素对象，name值不唯一，可能获取一个数组；
   //注意是Elements，而不是获取id时的Element

5. getElementsByTagName()方法
   document.getElementsByTagName("div")// 通过 标签名 来获取元素对象数组，如p，li，div，ul

6. getAttribute()方法
   elementNode.getAttribute(name) // elementNode为通过getElementById等获取的元素。 name为元素的属性
   例子：
   var a= document.getElementById("abc")； // 获取id为abc的元素
   var b= a.getAttribute("title"); // 获取元素的title值

7. setAttribute()方法
   elementNode.setAttribute(name,value)
   a.setAttribute("titile","啊哈哈哈") // 将a元素的title值设置为 啊哈哈哈

8. 访问子结点childNodes
   elementNode.childNodes
   node.firstChild //第一个子节点
   node.lastChild //最后一个子节点

9. 访问父节点parentNode
   elementNode.parentNode

10. 访问兄弟节点
    nodeObject.nextSibling

11. 插入节点
    appendChild(newnode) //在指定节点的最后一个子节点列表之后添加一个新的子节点。 无引号。
    ----- append vt. 附加; 添加; 贴上; 签（名） -----

insertBefore(newnode,node); // 在已有的子节点前插入一个新的子节点.

例子： <div id=”div1”><P id=”x1”>JavaScript</p></div>
<script type=”text/javascript”>
var otest = document.getElementById(“div1”);
var node = document.getElementById(“node”);
var newnode = document.creatElement(“p”); // 创建文本元素 p
newnode.innerHTML = “This is a new p”; // 在newnode元素中加入的内容
otest.insertBefore(newnode,node); // 在div中，在node元素前插入newnode元素，无引号

1. 删除节点removeChild()
   nodeObject.removeChild(node) //从子节点列表中删除一个节点，返回值为被删除的节点，无引号。

2. 替换元素节点replaceChild()
   node.replaceChild (newnode,oldnew ) ； //用newnode节点替换oldnew节点，无引号，newnode要首先被建立

3. 创建文本节点createTextNode
   document.createTextNode(“Hello World”)； // 创建文本节点，内容是Hello world

4. 获得浏览器窗口的尺寸 （包括工具栏和滚动条）
   var w= document.documentElement.clientWidth
   document.body.clientWidth; //获取窗口宽度两种方法，适用于所有浏览器

var h= document.documentElement.clientHeight
document.body.clientHeight; //获取窗口宽度两种方法，适用于所有浏览器

1. 网页尺寸scrollHeight和scrollWidth，获取网页内容高度和宽度。
   scrollHeight 是网页内容高度，不过最小值是 clientHeight。
   Scroll ： 画卷，卷轴。
   var w=document.documentElement.scrollWidth
   document.body.scrollWidth;

var h=document.documentElement.scrollHeight
document.body.scrollHeight;

1. 网页尺寸offsetHeight
   offsetHeight = clientHeight + 滚动条 + 边框。
   var w= document.documentElement.offsetWidth
   document.body.offsetWidth;

var h= document.documentElement.offsetHeight
document.body.offsetHeight;

1. 网页卷去的距离与偏移量 node.scrollLelt 为一个距离数值
   scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。