javascript-->dom方法

一、Dom：
　　意义：这个Dom操作一般也就在从页面获取数使用。
　　含义：Dom 文本对象模型。
　　主要作用：JS语言通过DOM技术操作Html页面，DOM就是他们之间沟通的一个桥梁。 提供js很多操作页面中的 元素和方法
　　什么是：文本对象模型：
　　文本对象模型：<html>标签开始到</html>标签结束，这个部分，都叫做Dom.
　　结构：Dom可以通过层次结构，排布成一个树状结构，这个树状结构叫做 【节点树】。
 二、节点的种类：
　　<div title = "属性节点">内容</div>。
　　div  --->元素节点。
　　title=“属性节点”  ------》 中间的内容是叫属性节点，
　　内容  --------》文本节点。
三、把html标签的内容划分为各种节点：　
　　文档节点(document)
　　元素节点 也叫标签getElementsByTagName html head
　　文本节点
　　属性节点 type=”text” name=”username”
　　注释节点
　　dom就是学习利用JS如何实现对Html标签增删改查。
四、元素节点的获取与设置：
　　4.1、document.getElementById( id属性值);
　　　　　　语法：document.getElementById(Id) ；
　　　　　　传的参数：元素的ID值（元素节点简称元素）；
　　　　　　返回值：   一个有指定ID的元素对象（元素是对象） ；
　　　　　　　　首先为啥说它是一个对象：
　　　　　　　　　　typeof document.getElementById("purchases");    //object，从而进行获取他的类型。
　　　　　　是对象就可以获取对象里面的属性。
　　　　　　　　　　获取里面的属性就是：对象.属性.
　　　　　　同时是对象的话，就可以往对象里面设置属性。
　　　　　　　　　　格式：对象.属性 = “”；
　　　　　　　　　　　　　对象.属性 = 5
　　　　　　　　<div id = 'ceshi' title = 'dom操作'></div>　　
　　注意：这个方法是与document对象相关联，只能由document对象调用。
 　　4.2、 name结尾的区别：
　　　　4.2.1、getElementsByName
　　　　　　　　含义：这个只用于 标签中含有 name  属性的标签；
　　　　　　　 　案例：

　　　　　　　　　　　<body>

　　　　　　　　　　　　<div name = "name"></div>

　　　　　　　　　　　　<input name="name"/>

　　　　　　　　　　　　<textarea name="name"></textarea>

　　　　　　　　　　　</body>

　　　　　　　　　　window.onload = function(){
　　　　　　　　　　var oName = document.getElementsByName('name'); //放的是name属性中的值。
　　　　　　　　　　console.log(oName);    //伪数组  三个都存在
　　　　　　　　　　console.log(oName[0].name);  underfan 这个不存在
　　　　　　　　　　console.log(oName[1].name);  //name
　　　　　　　　　　console.log(oName[2].name);  //name
　　　　　　　　　　}

　　　　　4.2.2、这个只能使用document.getElementsByName()这个操作。

　　　　　　　　不可以是父数组这个点getElementsByName（）这个操作

　　4.3、document.getElementsByTagName("标签名")；  这个是一个伪数组，但是也可以进行数组的操作。
　　　　　　返回集 htmlcollection ,用法和数组一致
　　　　　　说明: class为DOM元素上class属性的值  //获得是数组
　　　案例：
　　4.4、document.getElementsByClassName ("btnlist");  //这个获取的是 css的属性
　　　　　　console.log(btn[0]);  //因为clss的这个属性可以有多个，所以组成一个数组。  //这个也是伪是数组。
 
五、联系： getElementById与getElementsByTagName与getElementsByClassName之间的联系。
　　　　　　
　　　　　5.1、getElementById与getElementsByTagName之间的联系
　　　　　案例：显示li隔行变色
　　　　　　　<head>
　　　　<meta charset="utf-8">
　　　　<title></title>
　　　　<script type="text/javascript">
　　　　window.onload= function(){
　　　var oId = document.getElementById('id');  //拿到这个对象
　　    var oUl = oId.getElementsByTagName('ul');  //对象点属性  成数组
　　　var oLi = oUl[0].getElementsByTagName('li');
　　　console.log(oLi);
           console.log(oLi.length);  //4
　　　for(var i = 0 ;i < oLi.length; i++){
　　　if(i%2 ==0){
　　oLi[i].style.backgroundColor = 'pink'  //对象[属性] = 值；
　　console.log(oLi[i].style.backgroundColor);
　　}else{
　　oLi[i].style.backgroundColor = 'green'
　　console.log(oLi[i].style.backgroundColor);
　　}
　　}
　　　　}
　　　　　</script>
　　　　　　</head>
　　　　　　　　<body>
　　　　　　<div id="id">
　　　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　</ul>
　　　　　　　</div>
　　　　　　</body>
　　　　　5.2、 getElementById与getElementsByClassName之间的联系
　　　　　　　　<head>
　　　　　　<meta charset="utf-8">
　　　　　　<title></title>
　　　　　　<script type="text/javascript">
　　　　/* 可以拿到4个 */
　　　　window.onload = function(){
　　　　var oClass = document.getElementsByClassName('box');
　　　　console.log(oClass);  //拿到所有的class标签。
 
　　　　var oDiv = document.getElementById('id');  //拿到父元素
　　　　var oClass = oDiv.getElementsByClassName('box');  //拿到父元素下面的数组
　　　　}
　　　　</script>
　　　　　　</head>
　　　　　　<body>
　　　　　　<div id="id">
　　　　<div class="box"></div>
　　　　<div class="box"></div>
　　　　　　</div>
　　　　　　<div class="box"></div>
　　　　　　<div class="box"></div>
　　　　　</body>
　　　　　　5.3三者关联：getElementsByClassName因为是ie8以下的都不兼容，所以要进行兼容。
　　　　　　　　　　<html>
　　　　　　　　　　<head>
　　　　　　　　　　<meta charset="utf-8">
　　　　　　　　　　<title></title>
　　　　　　　　　　<script type="text/javascript">
　　　　　　　　　　　　function fangfa(nodes,classStr){
　　　　　　　　　　　　var oClssl = nodes.getElementsByTagName('*'); //父亲下面的所有元素。
　　　　　　　　　　　　// console.log(oClssl);
　　　　　　　　　　　　var rs = [];
　　　　　　　　　　　　for(var i = 0; i<oClssl.length;i++){  
　　　　　　　　　　　　　　if(oClssl[i].className == classStr){  //一个属性下面的classNamede属性
　　　　　　　　　　　　　　rs.push(oClssl[i]);  //把拿出来的所有元素都拿出来
　　　　　　　　　　　　}
　　　　　　　　　　　　　　}
　　　　　　　　　　　　return rs;
　　　　　　　　　　　　};
　　　　　　　　　　　　window.onload = function(){
　　　　　　　　　　　　var oDiv = document.getElementById('id');
　　　　　　　　　　　　var oClass = fangfa(oDiv,'box');
　　　　　　　　　　　　console.log(oClass);
　　　　　　　　　　　　}
　　　　　　　　　　</script>
　　　　　　　　　　　　</head>
　　　　　　　　　　　　　　<body>
　　　　　　　　　　　　　　<div id="id">
　　　　　　　　　　　　　　<div class="box"></div>
　　　　　　　　　　　　　　<div class="box"></div>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div class="box"></div>
　　　　　　　　　　　　<div class="box"></div>
　　　　　　　　　　　　</body>
　　　　　　　　　　　　</html>
 六、.document.querySelector 这个可以查找到id 也可以是查找到样式。
　　　但是同样都是不兼容。
 

 

posted @ 2020-10-26 14:38  诗亦0615  阅读(115)  评论(0)    收藏  举报