JavaScript-DOM（document object model）

最新推荐文章于 2020-03-09 13:50:16 发布

CasvotLee

最新推荐文章于 2020-03-09 13:50:16 发布

阅读量269

点赞数 1

本文链接：https://blog.csdn.net/ledgewont/article/details/76618728

版权

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就是有滚动条的窗口到浏览器的左边框的的距离。

CasvotLee

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM（document object model）

1. 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点（包含元素节点，属性节点，文本节点）树）。1) document.getElementById("id_name"); id要唯一。2)document.getElementsByName("name");name属性
复制链接

扫一扫