Js_DOM

最新推荐文章于 2021-06-24 08:46:13 发布

小风儿

最新推荐文章于 2021-06-24 08:46:13 发布

阅读量554

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/littlewindy520/article/details/64950997

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

简介

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： 代表 文本 -> text
8： 代表 注释 -> 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.firstChild
var 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

收藏

觉得还不错? 一键收藏
0
评论
Js_DOM

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

扫一扫

专栏目录