Js_DOM

来源：互联网发布：复式记账软件编辑：程序博客网时间：2024/06/07 13:03

简介

1.简介DOM: document Object Model  文档对象模型                      DOM 是针对HTML文档的一个API应用程序接口DOM给了一个层次话的节点树DOM 允许开发人员对页面的某一部分进行 超找，修改，删除，添加等功能DOM 操作HTML（分4个页面）1.JS修改所有的HTML元素2.JS修改所有的HTML属性3.JS修改所有的HTML样式4.JS能够对页面所有的事件作出反应

DOM查找

<p id="idP"></p><span class="mySpan"></span>            <a href="" name="myA"></a><div></div><div></div><div class="myDiv">    <p></p>    <p></p></div>document.getElementById("idP");document.getElementsByClassName("mySpan");通过class的名字获取，即使结果有一个，返回的也是  数组document.getElementsByName("myA");document.getElementsByTagName("div");利用CSS选择器获取一个标签（返回值是数组）document.querySelectorAll("");  id class 取值 后三种方式，只能在IE8+ 使用

DOM节点

<div>我是标签</div><!--我是注释--><script type="text/javascript">节点 ：由标签，文本（汉字、回车），注释 组成console.log(document.body.childNodes);注意： 在一起的文字和回车算一个文本节点各个节点类型的值：（使用节点对象 .nodeType)1： 代表 标签 -> (div, p, script 等等)各个节点英文名3： 代表 文本 -> text8： 代表 注释 -> comment

获取节点

<div id="myDiv">我是DIV</div>hh<!--我是地球人--><p>上面说的是假的</p><script type="text/javascript">//1.childNodes  获取所有儿子节点var a = document.body.childNodes;//console.log(a);//2.children 获取所有儿子标签节点（不包括文本和注释节点）                 最常用var brr = document.body.children;//console.log(brr);//3.nextSibling 获取下一个兄弟节点var myDiv = document.getElementById("myDiv");var nextNode = myDiv.nextSibling;//console.log(nextNode);--------------------------------------------nextSibling属性与nextElementSibling属性的差别： nextSibling（包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；   ----------------------------//4.previousSibling 获取上一个兄弟节点//5.parentNode  获取父级标签节点                                        最常用var fatherNode = myDiv.parentNode;//console.log(fatherNode);//6.firstChildvar result = document.body.firstChild;//console.log(result);//7.lastChild  最后一个子节点//8.nodeTyoe   最后一个子节点//9.nodeName   节点名字(标签大写，文本小写)var nName = document.body.firstChild.nodeName;console.log(nName);if(nName == "INPUT"){    alert(123);}

增删改节点

<div id="myDiv">    <p>孙子1号</p>    <p>孙子2号</p></div><script type="text/javascript">    // 1.createElement("div")   创建标签    document.createElement("div");    //2.createTextNode  创建文本节点    document.createTextNode("啊啊啊")    //3.appendChild()  向调用的标签的内部的末尾追加一个节点    var te = document.createTextNode("te");    //document.body.appendChild(te);    //4.insertBefore(node, targetNode) 向targetNode 前面兄弟位置插入一个新的node    var myDiv = document.getElementById("myDiv");    var theP = document.createElement("p");    document.body.insertBefore(theP,myDiv);    //注意： 由targetNode的父级调用insertBefore方法    //5.替换 replaceChild(newNode, oldNode) 把oldNode 替换成newNode    var myDiv = document.getElementById("myDiv");    var theImg = document.createElement("img");    theImg.src = "../Day03for循环/王俊.jpg";    //document.body.replaceChild(theImg, myDiv);    //由oldNode的父级调用replaceChild 方法    //6.removeChild  删除某一个子节点    //7.cloneChild     var myDiv = document.getElementById("myDiv");    var cloneDiv = myDiv.cloneNode(true);    //浅克隆（复制）：只是复制标签本身，不会复制这个标签的DOM

操作DOM属性

<style type="text/css">    .myDiv{        width: 200px;        height: 200px;        background: firebrick;    }</style></head><body>      <div id=""></div><script type="text/javascript">    //1. setAttribute(name, value)    //name  属性名称    //value 赋予的值    var d = document.getElementsByTagName("div")[0];    d.setAttribute("class","myDiv");    //2.getAttribute(name)     console.log(d.getAttribute("class"));    //3.removeAttribute(name) 删除某个属性    d.removeAttribute("class");    console.log(d.getAttribute("class"));</script></body>

利用属性操作方法，把第一张 赋予 第二张<img src="001.jpg" id="myImg" /><img src="" id="secondImg"/><script type="text/javascript">var first = document.getElementById("myImg");var second = document.getElementById("secondImg");a = first.getAttribute("src"); second.setAttribute("src", a);</script>

getAttribute和点访问的区别

<img src="../Day05冒泡/home/0.jpeg" id="myImg"/><script type="text/javascript">    var theImg = document.getElementById("myImg");//  theImg.setAttribute("a","abc");//  theImg.a = "abc";    console.log(theImg.className);    //对于标签原有的属性进行设置或者修改，    不管是  用点还是getAttribute 都能获取    //对于标签原来没有的属性，点设置的属性 点可以读出来  点不能和前者混合使用    //实际开发  多用点</script>

获取非行间样式的方法

<style type="text/css"> #myDiv{        width: 100px;        height: 100px;        background-color: green;    }</style></head><body>      <div id="myDiv"></div><script type="text/javascript">    var myDiv = document.getElementById("myDiv");    var result = getComputedStyle(myDiv, null).width;// 可以获取CSS内任何方法    //1.非IE浏览器    //参数1 ：标签对象    //参数2 ：伪类    //getComputerStyle(对象， 伪类).属性名    console.log(result);    //2.IE浏览器    //对象.currentStyle.属性名    var res = myDiv.currentStyle.width;    console.log(res);</script></body>

图片预加载

 图片预加载：在有很多图片的时候，如果在一起用户需要等待的时间比较长， 给用户的感觉不是很好，所以我们要让【图片预先加载到内存中】， 如果需要显示在页面上，直接显示<script type="text/javascript">//1.利用img的src属性，预加载图片到内存当中    var img = document.createElement("img");    img.src = "J147-67-大幅风景19.jpg";//2.当图片加载完毕会触发onload方法               img.onload = function(){    var theImg = document.createElement("img");//3.把图片真正加载在页面上    theImg.src = "J147-67-大幅风景19.jpg";    document.body.appendChild(theImg);}</script>

标题

这里写代码片

0 0