JavaScript之DOM详细使用实例

最新推荐文章于 2023-12-07 19:40:15 发布
最新推荐文章于 2023-12-07 19:40:15 发布
阅读量589 收藏 1
点赞数 1
分类专栏： JS 文章标签： java 函数 标签 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckyStar_H/article/details/70858617
版权 
**DOM**
<script type="text/javascript">
/*
 * EMCA:
   dom:文档对象模型  标签化成节点
   bom:浏览器对象模型
 */
 windom.onload = function(){//onload 等页面元素加载完毕采取执行Java
 //获取节点的几种方式  1.通过id
    var obj = document.getElementById("li1");
    alert(obj);
    var obj2 = document.getElementsByTagName("li")[0];//选择第一个
    alert(obj2.length);

    var obj3 = document.getElementsByName("n1")[0];
    alert(obj3);
   }
</script>
</head>
<body>
    <img alt="" src="555.jpg" width="250px" height="200px">
    <ul>
        <li id="li1">何家豪</li>
        <li>何小浩</li>
        <li>何大浩</li>
    </ul>
    <form>
        兴趣:<input type="checkbox" name="n1" value="1">足球
    </form>

</body>

**获取节点的操作**


<script type="text/javascript">
    /* 节点关系 ：1.子节点
              2.父节点
              3.兄弟节点

    */
    window.onload = function(){

        var obj = document.ElementById("u1");
        var child = obj.firstElementChild;//第一个子节点
        var child2 = obj.lastElementChild;//获取最后一个子元素

        child.style.color = "red";
        child2.style.color = "green";
//      alert(child.innerHTML);

        //获取任意子节点方法
        var child3 = obj.children;//获取所有的子节点
//      alert(child.length);
        var child4 = allChild[3];
        child4.style.color = "blue";

        //获取父节点
        var parent = obj.parentNode;
        parent.style.border = "2px solid red";

        //获取兄弟节点
        var bro1 = obj.previousElementSibling;//上一个兄弟节点
        bro1.style.color = "green";
        var bro2 = obj.nextElementSibling;//下一个兄弟节点
        bro2.style.color = "red";
    }
</script>

**节点的增删改**

<script type="text/javascript">
    /* 节点操作：增   删    改 */


    function add(){
        //创建节点
        var newObj = document.createElement("p");//创建一个元素节点 <p>
        //添加文本内容
        var text = document.createTextNode("我是一个新添加的p段落内容。。");
        newObj.appendChild(text); //添加子节点

        var obj = document.getElementById("d1");
        obj.appendChild(newObj); //添加到div里面
    }

    //添加附带属性的节点
    function add2(){
        var obj = document.getElementById("d1");
        //创建节点
        var img = document.createElement("img");
        img.src = "444.jpg";
        img.setAttribute("style","width:200px;height:200px");
        //创建属性
        var attr = document.createAttribute("good");//创建一个新的属性
        attr.value = "我是新创建的属性";  //给属性赋值
        //将属性添加到节点上 
    //  img.appendAttributeNode(attr);
    //  img.setAttribute(attr.to,"我是新创建的属性");
        //将节点添加到父节点里面
        obj.appendChild(img);
    }

    //在子节点之前插入节点
    function add3(){
        var obj = document.getElementById("d1");
        //创建节点
        var img = document.createElement("img");
        img.src = "444.jpg";
        img.setAttribute("style","width:200px;height:200px");

        obj.parentNode.insertBefore(img,obj);//插入节点的父节点调用此方法  (插入节点，被操作节点)
    }

    //自定义一个方法实现在节点后面插入节点
    function insertAfter(newElement,oldElement){
        var parent = oldElement.parentNode;//获取要操作的节点的父节点
        if(parent.lastElementChild == oldElement){//刚好是最后一个节点
            parent.appendChild(newElement);
        }else{//不是最后一个节点   在下一个兄弟节点前面插入
            parent.insertBefore(newElement,oldElement.nextElementSibling);
        }
    }

    function add4(){
        var obj = document.getElementById("d1");
        //创建节点
        var img = document.createElement("img");
        img.src = "444.jpg";
        img.setAttribute("style","width:200px;height:200px");

        insertAfter(img,obj);
    }

    //替换节点
    function f5(){
        var obj = document.getElementById("p1");
        //创建节点
        var img = document.createElement("img");
        img.src = "444.jpg";
        img.setAttribute("style","width:200px;height:200px");

        obj.parentNode.replaceChild(img,obj);  //替换节点
    }

    //删除节点
    function f6(){
        var obj = document.getElementById("p2");
        obj.parentNode.removeChild(obj);
    }

</script>

**事件**
<script type="text/javascript">
    /* 事件组成：句柄     事件源 */
    //定义事件的方式：1.内嵌     2.注册监听
    window.onload = function(){
        //内嵌
        var obj = document.getElementsByTagName("input")[0];
        obj.onclick = function(){
            alert("input被点击了。。。");
        }
        //给div内嵌事件
        /* var obj2 = document.getElementById("d1");
        obj2.onmouseover = function(){
            alert("鼠标进入div。。。");
        }
        obj2.onmouseout = function(){
            alert("鼠标出了div。。。");
        } */

        //给body添加一个鼠标按下时触发的事件
        var obj3 = document.getElementsByTagName("body")[0];
        obj3.onmousedown = function(){
            alert("body被点击了。。。")
        }

    }
    //注册监听
    function f(){
        alert("第二个input也被点击了。。");
    }
</script>

**属性操作**
<script type="text/javascript">
    function f1(){
        var obj = document.getElementsByTagName("img")[0];
        alert(obj.getAttribute("title"));

    }
    function f2(){
        var obj1 = document.getElementsByTagName("img")[0];
        var obj2 = document.getElementsByTagName("img")[1];
        obj1.setAttribute("src","222.jpg");
        obj2.setAttribute("src","444.jpg");

    }
    function f1(){
        var obj2 = document.getElementsByTagName("img")[0];
        obj2.removeAttribute("title");//删除属性

    }
</script>

**DOM操作**
<script type="text/javascript">
    window.onload = function(){
        /* 作用一 */
        var obj = document.getElementsByTagName("li")[0];
//      alert(obj.innerHTML);//获取
//      obj.innerHTML = "新社会北京";//设置
//      alert(obj.innerText);//获取文本内容，去掉内层标签

        /* 作用二 */
        var obj2 = document.getElementsByTagName("img")[0];
        alert(obj2.title);//获取属性  节点名字  属性名字
        obj2.title = "这是改变后的标题！";//设置属性
        obj2.src = "222.jpg";

        /* 作用三  设置样式  */
    }
    function f(){
        var obj = document.getElementsByTagName("div")[0];
        obj.style.width = "400px";
        obj.style.height = "400px";
        obj.backgroundColor = "yellow";
        obj.style.border = "2px solid blue";
    }
</script>
LuckyStar_H
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记之DOM操作实例分析
10-17
主要介绍了JavaScript学习笔记之DOM操作,结合实例形式分析了javascript针对dom元素的获取、设置相关操作常用函数使用技巧,需要的朋友可以参考下
DOM常见案例大盘点!
blog_pancc的博客
04-27 443
文章目录DOM案例一.DOM操作元素案例1.DOM修改元素内容案例2.分时问候案例3.仿京东显示隐藏密码明文案例4.仿淘宝关闭二维码案例5.遍历精灵图案例6.显示隐藏文本框内容案例7.密码框验证信息案例8.仿世纪佳缘用户名显示隐藏案例9.排他思想(算法)案例10.百度换肤案例11.表格隔行变色案例12.全选反选案例13.tab栏切换案例14.新浪下拉菜单案例15.简单版留言板案例16.动态生成表格案例二.DOM事件高级案例1.鼠标跟随案例2.仿京东按键输入内容案例3.仿京东快递查询单号案例 DOM案例 ​
DOM 操作元素来改变元素里面的属性（黑马课程总结【侵删】）
qq_42024229的博客
10-08 1101
4. 操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 4.1 改变元素内容 element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行 4.2 常用元素的属性操作 1. innerText、inn...
JavaScript-DOM实战案例
Welisit的博客
09-17 307
有时我们并不想一个函数，而是之后再执行，我们称之为“（scheduling a call）”。目前有两种方式可以实现： 允许我们将函数到一段时间间隔之后再执行。 允许我们一个函数，从一段之后开始运行，之后以该时间间隔连续重复运行该函数。并且通常情况下有提供对应的取消方法：大多数运行环境都有内置的调度程序，并且提供了这些方法：的语法如下：方法： 3.setInterval的使用 方法和 的语法相同：方法： 2.关闭隐藏信息 3.侧边栏展示 4.登录框 5.王者荣耀tabControl 6.王者轮播
DOM案例
ZiXiaweb的博客
08-29 418
什么是DOM 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，机构和样式。 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：页面中的所有内容都是节点（标签，属性，文本，注释等） ，DOM中使用node表示 DOM把以上内容都看做是对象 以下我们来
JavaScript DOM（文档对象模型）
网站开发初中级代码参考-转载
02-27 68
1、dom 的定义 document object model （文档对象模型） 2、为什么叫文档对象模型？ dom 可以将标记型（html xml）文档转换为对象 可以将标记型文档的每一个标记都转换为对象 将文档或者是标记封装成对象后，对象可以有更多的属性和方法操作文档 3、节点的概念 在dom的结构图中，我们可以看到，图有元素节点构成 每一个html元素都是一个节点 ...
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
javascript性能优化之DOM交互操作实例分析
10-23
主要介绍了javascript性能优化之DOM交互操作技巧,结合实例形式总结分析了JavaScript针对DOM操作过程中的各种常见优化操作技巧,需要的朋友可以参考下
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
DOM 简介+案例
m0_51003607的博客
03-22 751
什么是 DOM 文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言(html 或XML)的标准编程接口 DOM 树 文档：一个页面就是一个文档，DOM中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 如何获取页面元素 DOM 在我们实际开发中主要用来操作元素。 获取页面中的元素可以使用以下几种方式 根
Javascript_Dom操作案例
01-10
Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例，希望对大家有所帮助
DOM基础详细 包含多个案例
qq_56303170的博客
08-13 710
DOM基础详细 包含多个案例 DOM基础 详细DOM基础详细 包含多个案例一级目录二级目录三级目录DOM树获取元素如何获取元素根据ID获取根据标签名获取获取特殊元素事件基础操作元素改变元素的内容修改src(其他的类似)根据时间，显示不同的问候语和图片表单元素的修改显示和隐藏密码操作元素的大小、颜色及样式行内样式操作循环精灵图显示隐藏文本框内容使用className修改样式属性密码框验证信息排它思想点击图片修改背景全选和单选自定义属性获取自定义属性设置自定义属性移除属性tab栏切换节点操作节点层级父级节点子级
JavaScript DOM详解
Chiclaim
10-03 7333
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
Javascript（十一）javascript DOM详解
一枝韩独秀的博客
08-07 1350
一、DOM定义 DOM，全称Document Object Model文档对象模型。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 文档 – 文档表示的就是整个的HTML网页文档 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象...
JavaScript之简单DOM小案例
weixin_50939386的博客
04-05 815
简单的几个Dom案例
DOM操作经典案例
qq_41189709的博客
08-05 1879
DOM操作经典案例百度换肤案例鼠标移进移出变色（行变色）表单全选全取消案例tag导航栏切换案例 百度换肤案例 百度换肤案例就是当你点击一张图片时，当前的背景图片就为你所点击的这张图片，实现起来也比较简单，就是更改一下backgroundImage的url路径 js代码： <script> var img=document.querySelectorAll('img')...
JS DOM编程
Y__J___的博客
10-25 325
获取文本框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程-获取文本框的value</title> </head> <body> <script type="text/javascript"&gt...
DOM的6个实例
weixin_40205005的博客
06-15 1490
第1个实例：循环单击变色&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;1111&lt;/h1&gt
DOM案例（详细源码版）
最新发布
qq_57162921的博客
12-07 496
DOM学习的常见案例
用JavaScript实现dom例子
02-20
一个简单的JavaScript实现DOM的例子是：var element = document.getElementById("myDiv"); element.innerHTML = "Hello World!";

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值