JavaScript-DOM（document object model）

来源：互联网发布：淘宝卖家中心进不去编辑：程序博客网时间：2024/05/16 04:58

1. 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点（包含元素节点，属性节点，文本节点）树）。

1) document.getElementById("id_name"); id要唯一。

2)document.getElementsByName("name");

name属性的值可能不唯一，所以该方法返回的是一个数组；

3)document.getElementsByTagName("TagName");

tagname:常见的tagname(标签名)比如，a , img , li, p等等

三者区别：

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人， getElementsByTagName("小孩")。

实例：

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">        <title>无标题文档</title>    </head>        <body>        <form>          请选择你爱好:<br>          <input type="checkbox" name="hobby" id="hobby1">  音乐          <input type="checkbox" name="hobby" id="hobby2">  登山          <input type="checkbox" name="hobby" id="hobby3">  游泳          <input type="checkbox" name="hobby" id="hobby4">  阅读          <input type="checkbox" name="hobby" id="hobby5">  打球          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>          <input type="button" value = "全选" onclick = "checkall();">          <input type="button" value = "全不选" onclick = "clearall();">          <p>请输入您要选择爱好的序号，序号为1-6:</p>          <input id="wb" name="wb" type="text" >          <input name="ok" type="button" value="确定" onclick = "checkone();">        </form>        <script type="text/javascript">        function checkall(){                                                                                 //全选            var hobby = document.getElementsByTagName("input");          for(i=0;i<hobby.length;i++)  {  if(hobby[i].type=="checkbox")  hobby[i].checked=true;  }                             }        function clearall(){                                                                          //全不选            var hobby = document.getElementsByName("hobby");       for (var i in hobby)                                                          {   if(hobby[i].type=="checkbox")  hobby[i].checked=false;   }                     }                function checkone(){                                                           //输入数字选中某选项            var j=document.getElementById("wb").value;            var hobby = document.getElementById("hobby"+j);                 得到对象hobby j；             hobby.checked = true;         // 任务3                }                </script>    </body></html>

2. getAttribute()方法

通过元素节点的属性名称获取属性的值。

格式：属性值=元素节点.getAttribute("属性名")

元素节点=getElementById(Name..);

属性名，元素的属性的名字（比如id ，title等）。

3.setAttribute()方法

该方法用于添加新的属性和属性值或者更改属性值

格式：元素节点.setAttribute("属性名",属性值)；

4. 节点属性

元素节点.nodeName

元素节点.nodeValue

元素节点.nodeType 1代表元素，2代表属性，3代表文本。

5. 访问子节点childNodes

元素节点..childNodes

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>childnodes</title></head><body><div>  javascript    <p>javascript</p>                    <div>jQuery</div>  <h5>PHP</h5></div><script type="text/javascript"> var tag=document.getElementsByTagName("div");         //得到一个标签名是div的数组var child=tag[0].childNodes;                                    //得到第一个div标签的子节点，本例只有一个，故取i=0 for(var i=0 ;i<child.length;i++) document.write(child[i].nodeName+"<br/>");                    //输出</script></body></html>S

6. 找到某节点的第一个子节点和最后一个子节点

node.firstChild=node.childnodes[0]

node.lastChild=elementNode.childNodes[elementNode.childNodes.length-1]

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>套路2</title></head><body><div id="con">  <p>javascript</p>  <div>jQuery</div>  <h5>PHP</h5></div><script type="text/javascript">  var x=document.getElementById("con");var first=x.firstChild;                      //注意这里不取x[0]的原因是，id标识符是唯一的。 document.write(first.nodeName+"<br/>");     var last=x.lastChild;                           //注意这里不取x[0]的原因是，id标识符是唯一的。document.write(last.nodeName);</script></body></html>

7. 访问父节点parentNode

node.parentNode

8.访问兄弟节点nextSibling

1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

9.添加子节点(在尾部)

语法： appendChild(newnode)

newnode是指定的要添加的节点，包含这个节点的标签名。

10. 插入新节点insertBefore（）

语法： insertBefore(newnode,node);

另：创造一个新的节点：

var newnode=document.createElement("标签名")；

newnode.value=" .....";

newnode.innerHTML="...." //给子节点赋值

11. 删除节点 removeChild（）

语法： nodeObject.removeChild("node");

12.替换元素节点replaceChild（）

语法： replaceChild（newnode，node_Old）

注意:
1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
2. newnode 必须先被建立。

一般配合parent_node.appendChild（newnode）使用更佳。

13. 创建本本节点creatTextNode("text")

语法： document.creatTextNode("text");

一般配合parent_node.appendChild（newnode）使用更佳。

14. 获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

write(window.innerHeight);
write(window.innerWidth);

15. 网页尺寸scrollHeight（Width）

格式：document.body.scrollHeight；

16. 网页尺寸offsetHeight

格式：document.body.offsetWidth（Heigtht）；

17. offleft与scrollleft

scrollLfet就是对象/窗口到网页布局好的左边边框的距离(滚动条移动)。

offsetLeft就是有滚动条的窗口到浏览器的左边框的的距离。

阅读全文

0 0