Java学习日记（day23）

肆氿

于 2024-08-19 09:06:13 发布

阅读量475

点赞数 8

文章标签： java 学习开发语言

本文链接：https://blog.csdn.net/qq_59031302/article/details/141310735

版权

一、什么是加载事件onload

js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行。

window.onload = function() {

}

onload在页面加载完之后执行

dom:用JS对html标签进行增删改查

二、元素节点获取

三、文本节点获取

hello

需要借助div元素节点再获得其内部的文本节点.

var dvnode = document.getElementsByTagName(‘div’)[0];

dvnode.firstChild; //(或调用lastChild)获得元素div内部的第

一个子节点对象,而不是自己这个节点

四、兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点

nextSibling:获得下个兄弟节点

previousSibling:获得上个兄弟节点

childNodes:父节点获得内部全部的子节点信息

五、父节点

节点.parentNode

六、属性值操作

1. 获取属性值

itnode.属性名称; //只能操作w3c规定的属性

itnode.getAttribute(属性名称); //规定的和自定义的都可以获取

2. 设置属性值

itnode.属性名称 = 值; //只能操作w3c规定的属性

itnode.setAttribute(名称，值); //规定的和自定义的都可以设置

Field、Attribute、Property

七、节点创建和追加

节点创建

元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);

节点追加：

父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
    </head>
    <body>
       <!-- 
       <ul>
          <li mean='热情'>red</li>
          <li mean='冷静'>green</li>
          <li mean='生机'>blue</li>
       </ul> 
       -->
       
       <script type="text/javascript">
          window.onload = function() {
             var colors = ['red', 'green', 'blue'];
             var colorMeans = ['热情', '冷静', '生机'];
             var ul = document.createElement('ul');
             /*for (var color of colors) {
                console.log(color);
             }*/
             /*for (var i in colors) {
                console.log(i); // 0, 1, 2
             }*/
             for (var i = 0; i < colors.length; i++) {
                var li = document.createElement('li');
                li.setAttribute('mean', colorMeans[i]);
                var textNode = document.createTextNode(colors[i]);
                li.appendChild(textNode);
                ul.appendChild(li);
             }
             document.body.appendChild(ul);
          }
       </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
    </head>
    <body>
       <ul>
          <li mean='热情'>red</li>
          <li mean='生机'>blue</li>
          <li mean='冷静'>green</li>
       </ul> 
       <ul>
          <li mean='饿'>orange</li>
       </ul> 
       
       <script type="text/javascript">
          window.onload = function() {
             var blue = document.getElementsByTagName('li')[1];
             var orange = document.getElementsByTagName('li')[3];
             var firstUl = document.getElementsByTagName('ul')[0];
             //firstUl.appendChild(orange);
             //firstUl.insertBefore(orange, blue);
             firstUl.replaceChild(orange, blue);
          }
       </script>
    </body>
</html>

八、节点删除

父节点.removeChild(子节点);

九、总结

DOM操作

元素、文本、属性、document节点获取

元素：getElementById()/getElementsByTagName()
文本：元素节点.firstChild/lastChild;
属性：元素节点.attributes;元素节点.attributes.属性名称;

document:元素节点.parentNode

属性值操作

元素节点.属性名称;
元素节点.属性名称 = 值;
元素节点.getAttribute(属性名称);
元素节点.setAttribute(属性名称，值);

节点创建、追加、复制、删除

创建：

元素-document.createElement(tag名称);

文本-document.createTextNode(文本内容);

元素节点.setAttribute();

追加：

父.appendChild(子);

父.replaceChild(new，old);

父.insertBefore(new,old);

删除：

父.removeChild(子)

十、点击事件

通过鼠标、键盘对页面所做的动作就是事件。

事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任

onclick onmouseover onmouseout onkeyup onkeydown onblur onfocus onsubmit

在标签内写onclick事件

在JS写 onlicke=function(){} 函数

var btn = document.getElementById('btnId');

btn.onclick = function () {

alert('thanks');

}

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
    </head>
    <body>
       <button onclick="alert('hello')">click1</button>
       <input type="button" value="click2" onclick="cli()" onmouseover="over()" onmouseout="out()"/>
       <input type="text" onfocus="focu()" onblur="blu()">

       <input id="btnId" type="button" value="click3" />

       <script type="text/javascript">
          window.onload = function () {
             var btn = document.getElementById('btnId');
             btn.onclick = function () {
                console.log('onlick');
             }
             btn.onmouseover = function () {
                console.log('onmouseover');
             }
             btn.onmouseout = function () {
                console.log('onmouseout');
             }
          }

          function cli() {
             console.log('cli');
          }

          function over() {
             console.log('over');
          }

          function out() {
             console.log('out');
          }

          function focu() {
             console.log('focus');
          }

          function blu() {
             console.log('blur');
          }
       </script>
    </body>
</html>

十一、综合案例：百度换肤

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
          *{
             margin: 0;
             padding: 0;
          }
          img{
             width: 150px;
             height: 150px;
          }
          .box{
             /*水平居中*/
             text-align: center;
             padding-top: 30px;
             padding-bottom: 30px;
             background-color: rgba(99,134,177,0.6);
          }
          body{
             background-image: url("images/1.jpg");
             background-size: cover; /* 图像将铺满整个元素 */
             background-repeat: no-repeat;/* 防止图像平铺 */
          }
       </style>
    </head>
    <!-- style="background-image: ;" -->
    <body style="">
       <div class="box">
          <img src="images/1.jpg"/>
          <img src="images/2.jpg"/>
          <img src="images/3.jpg"/>
          <img src="images/4.jpg"/>
          <img src="images/5.jpg"/>
       </div>
       
       <script type="text/javascript">
          window.onload = function () {
             var images = document.getElementsByTagName('img');
             for (var i = 0; i < images.length; i++) {
                images[i].onclick = function () {
                   //this 代表当前点击对象
                   var imageSrc = this.src;
                   //document.body.style.backgroundImage = 'url("images/2.jpg")';
                   document.body.style.backgroundImage = 'url("'+imageSrc+'")';
                }
             }
          }
       </script>
    </body>
</html>

肆氿

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Java学习日记（day23）

js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行。onload在页面加载完之后执行dom:用JS对html标签进行增删改查DOM操作元素、文本、属性、document节点获取元素：getElementById()/getElementsByTagName()文本：元素节点.firstChild/lastChild;属性：元素节点.attributes;元素节点.attributes.属性名称;document:元素节点.parentNode。
复制链接

扫一扫