DOM

简介: 文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.

文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是javascript语言规范的规定的核心内容·

一丶查找元素

1·直接查找

document.getElementById              //根据ID获取一个标签
document.getElementsByName            //根据name属性获取标签集合
document.getElementsByClassName    //根据class属性获取标签集合
document.getElementsByTagName      //根据标签名获取标签集合

2·简介查找

parentNode          //父节点
childNodes            //所有子节点
fistChild                 //第一个子节点
lastChild                 //最后一个子节点
nextSibling              //下一个兄弟节点
previousSibling        //上衣个兄弟节点


parentElement           //父节点标签元素
children                      //所有子标签
firstElementChild          //第一个子标签元素
lastElementChild           //最后一个子标签元素
nextElementtSibling       //下一个兄弟标签元素
previousElementSibling      //上一个兄弟标签元素

二丶操作 

1丶内容

innerText             //文本
outerText
innerHTML       //HTML内容
innerHTML
value               //值

2丶属性

 

attrbutes                        //索取所有标签属性
setAttribute(key,value)    //设置标签属性
getAttribute(key)             //获取指定标签属性


/*
var atr = document.createAttribute("class");
atr.nodeValue = "democlass";
document.detElementById("n1").setAttributeNode(atr);
*/

 

  

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="bottob" value="全选" onclick="CheckAll();"/>
    <input type="bottob" value="取消" onclick="CheckAll();"/>
    <input type="button" value="反选" onclick="ReverseCheck();"/>
    <table border="1">
        <thead>
        </therd>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>
             <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>         
             <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>   
    </table>
    <script>
        function CheckAll(tha){
            var tb = document.getElementById("tb");
            var trs = tv.childNodes;
            for(var i=0;i<trs.lengt;i++){
               var current_tr = trs[i];
               if(current_tr.nodeType == 1){
                   var inp = current_tr.firstElementChild.getElementByTagName("input")[0];
                    inp.checked = true;
               }
            }
         }  
        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }
        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }


             
    </script>
 
View Code

3丶class操作

className                      //获取所有类名
classList.remove(cls)           //删除指定类
classList.add(cls)                 //添加类

4丶标签操作  

a·创建标签

 

//方式一

var tag = document.createElement("a")
tag.innerText = "Wyc"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wuyongcong"



//方式二

var tag = "<a class="c1" href = "http://www.cnblogs.com/wuyongcong">wuyongcong</a>"

 

b·操作标签  

//方式一

var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))

//注意:第一个参数只能是"beforeBegin","afterBegin","befoeEnd","afterEnd"


//方式二

var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5丶样式操作  

var obj = document.getElementById("i1")

obj.style.fontSize = "32px";
obj.style.backgroundColor = "blue";

  

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color:gray;"/>
<script>
    function Focus(ths){
        ths.style.color = "black";
        if(ths.value == "请输入关键字" || ths.value.trim() == ""){
            ths.value = "";
        }
     }
     function Blur(ths){
         if(ths.value.trim() == ""){
           ths.value.color = "gray";
         }else{
                ths.style.color = "black";
         }
      }
</script>
View Code

6丶位置操作

//总文档高宽
document.documentElement.offsetHeight


//当前文档占屏膜高宽
document.documentElement..clientHeight


//自身高度
tag.offsetHeight


//距离上级定位高度
tag.offsetTop


//父定位标签
tag.offsetParent


//滚动高度
tag.scrollTop

/*
        clientHeight  -> 课件区域: height + padding
        clienTop    ->  border高度
        offsetHeight   ->  可见区域:height + padding + border
        offsetTop     ->  上级定位标签的高度
        scrollHeight     -> 全文高:height  +  padding
        scrollTop     ->   滚动高度
        特别的:
                document.documentElement代指文档根节点
*/

7丶提交表单  

document.getElementById("form").submit()

8丶其他操作

  

console.log        //输出框

alert                  //弹出框

confirm              //确认框


//    URL和刷新

location.href                 //获取URL

location.href = "url"           //重定向

location.reload()                 //重新加载


//定时器
setInterval                        //多次定时器

clearInterval                     //清除多次定时器

setTimeout                       //单次定时器

clearTimeout                      //清除单词定时器

三·事件  

 

 

 对于事件需要注意的要点:

        ·  this

        ·  event

        ·  事件链以及跳出

this标签当前正在操作的标签,event封装了当前事件的内容·

 

  

目录
相关文章
|
机器学习/深度学习 人工智能 算法
软件测试中的人工智能:现状与未来
本文探讨了人工智能在软件测试中的应用,包括自动化测试、缺陷预测、测试用例生成等方面。通过分析当前AI技术的优势和不足,提出了未来可能的发展方向,为软件测试领域提供了新的思路和方法。
509 4
|
11月前
|
机器学习/深度学习 人工智能 自然语言处理
软件测试中的人工智能:改变游戏规则的革新
在这篇技术性文章中,我们将深入探讨人工智能(AI)如何彻底改变了软件测试领域。从自动化测试到智能缺陷检测,AI不仅提高了测试的效率和准确性,还为软件开发团队提供了前所未有的洞察力。通过具体案例,本文揭示了AI在软件测试中应用的现状、挑战及未来趋势,强调了技术创新在提升软件质量与开发效率中的关键作用。
|
9月前
|
C语言
【C语言】break 关键字详解
- `break` 关键字用于提前退出循环体或 `switch` 语句的执行。 - 在 `for`、`while` 和 `do-while` 循环中,`break` 可以帮助程序在满足特定条件时退出循环。 - 在 `switch` 语句中,`break` 用于终止 `case` 代码块的执行,避免代码“穿透”到下一个 `case`。 - 注意 `break` 只会退出最内层的循环或 `switch` 语句,确保在嵌套结构中正确使用 `break` 以避免意外的控制流行为。
895 2
|
11月前
|
JavaScript API 开发工具
vue2和vue3版本区别
【10月更文挑战第4天】
|
人工智能 自然语言处理 测试技术
通义灵码多维度体验分享
一文带你多维度了解通义灵码
419 4
|
开发工具 开发者
使用阿里云的 OpenAPI SDK 时经常遇到调用失败的问题
使用阿里云的 OpenAPI SDK 时经常遇到调用失败的问题
479 1
支持合成一分钟高清视频,华科等提出人类跳舞视频生成新框架UniAnimate
【6月更文挑战第14天】华科等机构推出 UniAnimate 框架,能生成逼真的人类跳舞视频,尤其适合动画、虚拟偶像和游戏领域。该框架采用视频扩散模型,减少优化难度,确保时间一致性,且支持生成长达一分钟的高清视频。虽然存在动作不自然和计算成本高的问题,但已在实验中展现出优于现有技术的表现。[链接](https://arxiv.org/abs/2406.01188)
264 4
|
敏捷开发 开发框架 架构师
敏捷开发发展和优缺点 1
敏捷开发发展和优缺点
464 0
|
运维 安全 物联网
带你读《网络安全等级保护2.0定级测评实施与运维》——1.2 等保 2.0 时代的主要变化
带你读《网络安全等级保护2.0定级测评实施与运维》——1.2 等保 2.0 时代的主要变化