HTML DOM笔记

最新推荐文章于 2022-01-04 16:08:58 发布
最新推荐文章于 2022-01-04 16:08:58 发布
阅读量198 收藏 1
点赞数
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46517301/article/details/105954064
版权

DOM：文档对象模型
把html里面的各种数据当做对象进行操作的一种思路

一、节点概念

DOM把所有的html都转换为节点，整个文档、元素、元素属性、元素内容、注释，都是节点
本例通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点

<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
  
</html>

在这里插入图片描述

二、获取节点

1.通过id获取元素节点
var div1=document.getElementById(“d1”);


2.通过标签名获取一个元素数组 var divs=document.getElementsByTagName("div");
3.通过类名获取节点数组 var elements=document.getElementsByClassName("d");
4.通过表单元素的name获取元素节点 var elements=document.getElementsByName("name"); 
<html>
用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
var  elements= document.getElementsByName("userName");
  
for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
}
  
</script>
</html>

5.获取属性节点：首先通过getElementById获取元素节点，然后通过元素节点的attributes以数组形式获取其下的所有属性节点 
<html>
   
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
 
</script>
</html>

在这里插入图片描述


6.获取内容节点：首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点，其中第一个子节点就是其内容节点 
<html>
    
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
 
</script>
</html>

在这里插入图片描述

三、节点的属性

1.节点名称nodeName

<html>
  
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>

在这里插入图片描述
2.节点值nodeValue

<html>
   
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>

在这里插入图片描述
3.节点类型nodeType
在这里插入图片描述
4.修改与获取元素的文本内容
①通过x.childNodes[0].nodeValue;
②通过x.innerHTML

<html>
    
<div id="d1">hello HTML DOM</div>
<script>
 
function changeDiv1(){
  document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
  document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
 
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
 
</html>

在这里插入图片描述
5.元素上的属性
id,value等可以直接通过x.id,x.value等直接访问
自定义属性可以通过x.getAttribute(“a”);或x.attributes[“a”].nodeValue;来获取

<html>
    
<div id="d1">hello HTML DOM</div>
 
<script>
 
function get(){
 
  var input1 = document.getElementById("input1");
  var s = "id="+input1.id + "<br>";
  s += "value="+input1.value + "<br>";
  s += "class="+input1.className + "<br>";
  s += "test="+input1.getAttribute("test")+ "<br>";
  s += "test="+input1.attributes["test"].nodeValue+ "<br>";
 
  document.getElementById("d1").innerHTML= s;
}
</script>
 
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>
 
<div style="height:30px"></div>
</html>

在这里插入图片描述

四、节点样式

一个元素节点的style属性即对应的css
1.隐藏和显示：通过给元素的style.display赋值改变显示还是隐藏

<button onclick="hide()">隐藏div</button>
  
<button onclick="show()">显示div</button>
  
<br>
<br>
  
<div id="d">
  
这是一个div
  
</div>
  
<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}
  
function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}
  
</script>

在这里插入图片描述
2.改变背景色：通过给元素的style.backgroundColor赋值，修改背景色

<div id="d1" style="background-color:pink">Hello HTML DOM</div>
 
<button onclick="change()">改变div的背景色</button>
 
<script>
function change(){
  var d1 = document.getElementById("d1");
  d1.style.backgroundColor="green";
}
</script>

在这里插入图片描述

五、事件

1.焦点事件：获取焦点onfocus和失去焦点onblur

<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
 
<script>
function f(){
 document.getElementById("message").innerHTML="输入框1获取了焦点";
}
 
function b(){
 document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
 
</script>

在这里插入图片描述
2.鼠标事件：在组件上有鼠标按下onmousedown，鼠标弹起onmouseup，鼠标经过onmousemove，鼠标进入onmouseover，鼠标退出onmouseout
当鼠标进入一个组件时，onmousemove和onmouseover都会触发，但鼠标在组件上每次移动时都只会触发onmousemove

<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<br>
<br>
 
<input type="button" onmousemove="move()"  value="用于演示鼠标经过" >
<br>
<br>
 
<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<br>
<br>
 
<input type="button" onmouseout="out()" value="用于演示鼠标退出" >
 
<br>
<br>
<div id="message"></div>
  
<script>
var number = 0;
 
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
  
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
 
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
 
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
 
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
 
</script>

在这里插入图片描述
3.键盘事件：
在组件上（先用鼠标选中组件）键盘按下onkeydown/onkeypress，键盘弹起onkeyup

“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" onkeydown="down(event)" value="用于演示按下keydown" >
<br>
<br>
 
<input type="button" onkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
 
<input type="button" onkeyup="up()" value="用于演示弹起" >
<br>
<br>
 
<div id="message">
  
</div>
  
<script>
var number =0;
function down(e){
 
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
   text += " 并且按下了shift键";
 
document.getElementById("message").innerHTML=text ;
}
 
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
 
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
   text += " 并且按下了shift键";
 
document.getElementById("message").innerHTML=text ;
}
 
</script>

在这里插入图片描述
4.点击事件：在组件上单机onclick，双击ondblclick
空格或回车也可以造成单机的效果

<input type="button" onclick="singleClick()" ondblclick="doubleClick()"  value="用于演示单击和双击" >
 
<br>
<br>
<div id="message"></div>
  
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
  
function doubleClick(){
 
document.getElementById("message").innerHTML="双击按钮";
}
</script>

在这里插入图片描述
5.变化事件：当组件的值发生变化时，会触发onchange事件
对于输入框而言，只有在失去焦点的时候才会触发onchange

<input type="text" id="t1" onchange="change()"  value="" >
  
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
   
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
   
</script>

在这里插入图片描述

6.提交事件：可以在form元素上，监听提交事件，当form元素@提交的时候，会触发onsubmit事件

<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
 
<script>
  function login(){
      alert("提交表单");
  }
</script>

在这里插入图片描述
7.加载事件：当整个文档或一个图片加载成功，会触发加载时间；即当body元素或img@加载的时候，会触发onload事件

<script>
  function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
  }
  function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
  }
 
</script>
 
<body onload="loadBody()">
  <div id="message1"></div>
  <div id="message2"></div>
</body>
 
<img onload="loadImg()" src="https://how2j.cn/example.gif"/>

在这里插入图片描述
8.当前组件：this表示触发事件的组件，可以在调用函数的时候作为参数传进去

<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
 
<br>
<br>
<div id="message"></div>
  
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
 
</script>

在这里插入图片描述
9.阻止事件的发生：比如在提交一个表单的时候，如果用户名为空，则弹出提示并阻止原本的提交
在调用函数的时候增加一个return；在函数中如果发现用户名为空则返回false；当onsubmit得到的返回值是false时，表单的提交就被取消了

<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
  
<script>
  function login(){
   var name = document.getElementById("name");
   if(name.value.length==0){
     alert("用户名不能为空");
     return false;
   }
   return true;
    
  }
</script>

六、节点关系

1.节点关系有parentNode, firstNode, lastNode, previousSibling, nextSibling, childNodes, children


2.父节点关系：通过parentNode获取父节点
本例中从id="d1"的div开始递归获取其父节点，分别获取到如下：
div[id="parentDiv]->body->html->document

<html>
<body>
<script>
var node = null;
function showParent(){
   if(null==node)
      node = document.getElementById("d1");
    
   if(document == node)
      alert("已是根节点:document");
   else{
      alert(node.parentNode);
      node = node.parentNode;
   }
}
</script>
 
<div id="parentDiv">
   父Div的内容
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div></div>
 
<button onclick="showParent()">不断递归d1的父节点</button>
</body>
</html>

在这里插入图片描述
3.同胞节点关系：分别通过previousSibling和nextSibling属性获取前一个以及后一个同胞节点
本例中，因为d1和d2标签是紧挨着的，所以d2的前一个节点是d1；
而d2和d3不是紧挨着的， 标签之间有任何字符、空白、换行都会产生文本元素#text

<script>
 
function showPre(){
    var d2 = document.getElementById("d2");
    alert(d2.previousSibling.innerHTML);
}
 
function showNext(){
    var d2 = document.getElementById("d2");
    alert(d2.nextSibling.nodeName);
}
</script>
  
<div id="parentDiv">
   父Div的内容
 <div id="d1">第一个div</div><div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
  
<button onclick="showPre()">获取d2的前一个同胞</button>
 
<button onclick="showNext()">获取d2的后一个同胞</button>

在这里插入图片描述
4.子节点关系：firstChild第一个子节点，lastChild最后一个子节点，childNodes所有子节点（数组）

注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行，那么firstChild第一个子节点将会是文本节点，不会是第一个元素节点；
lastChild 和firstChild同理。 在本例中故意让第3个元素的结束标签与div的结束标签紧挨着，所以最后一个子节点就是第三个标签；
子元素个数一共是6个。

<script>
function showfirst(){
   var div = document.getElementById("parentDiv");
   alert(div.firstChild.nodeName);
}
 
function showlast(){
   var div = document.getElementById("parentDiv");
   alert(div.lastChild.nodeName);
}
 
function showall(){
   var div = document.getElementById("parentDiv");
     alert(div.childNodes.length);
}
</script>
 
<div id="parentDiv">
   父Div的内容
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div></div>
 
<button onclick="showfirst()">第一个子节点</button>
<button onclick="showlast()">最后一个子节点</button>
<button onclick="showall()">所有子节点数量</button>

在这里插入图片描述
5.children属性会排除文本节点，所以将4中的childNodes.length换为children.length则结果为3

七、创建节点

1.创建元素节点：c=document.createElement("…");
插入元素节点：p.appendChild©;

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>
 
<button onclick="add()">在div中追加一个hr元素</button>
 
</html>

在这里插入图片描述
2.创建文本节点：首先创建一个元素节点p，然后通过createTextNode创建一个内容节点text，然后把text加入到p，再把p加入到div

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
 
  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);
 
  var div1 = document.getElementById("d");
  div1.appendChild(p);
 
}
</script>
  
<button onclick="add()">在div中追加一个p元素</button>
  
</html>

在这里插入图片描述
3.创建属性节点：首先创建一个元素节点a，接着创建一个内容（文本）节点content，把content加入到a中；然后通过createAttribute创建一个属性节点，设置属性节点的nodeValue后，通过setAttributeNode把该属性设置到元素节点a上，最后把a加入到div中

<html>
<div id="d">Hello HTML DOM<br></div>
 
<script>
function add(){
  
  var a=document.createElement("a");
  var content = document.createTextNode("http://12306.com");
  a.appendChild(content);
 
  var href = document.createAttribute("href");
  href.nodeValue="http://12306.com";
  a.setAttributeNode(href);
 
  var div1 = document.getElementById("d");
  div1.appendChild(a);
}
</script>
   
<button onclick="add()">在div中追加一个超链</button>
   
</html>

在这里插入图片描述

八、删除节点

1.删除元素节点：两个步骤
①先获取该元素的父节点
②通过父节点，调用removeChild删除该节点

<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
 
</script>
 
<div id="parentDiv">
  <div id="div1">安全的div</div>
  <div id="div2">即将被删除的div</div>
</div>
 
<button onclick="removeDiv()">删除第二个div</button>

在这里插入图片描述
2.删除属性节点：两个步骤
①先获取该元素节点
②调用元素节点的removeAttribute删除指定属性节点

<script>
function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute("href");
}
 
</script>
 
<a id="link" href="http://12306.com">http://12306.com</a>
 
<br>
<button onclick="removeHref()">删除超链的href属性</button>

在这里插入图片描述
3.删除文本节点：设置innerHTML="";

九、替换节点

①获取父节点
②创建子节点
③获取将被替换的子节点
④通过父节点的replaceChild(新节点,将被替换节点);替换

<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
  
<script>
  
function replaceDiv(){
  var d4=  document.createElement("div");
  var text = document.createTextNode("第四个div");
  
  d4.appendChild(text);
  
  var d3 = document.getElementById("d3");
  
  var parentDiv = document.getElementById("parentDiv");
  
  parentDiv.replaceChild(d4,d3);
}
 
</script>
  
<button onclick="replaceDiv()">替换第3个div</button>

在这里插入图片描述

十、插入节点

1.在最后面追加新节点：
①创建新节点
②获取父节点
③通过appendChild追加新节点

<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
   
<script>
   
function appendDiv(){
  var d4=  document.createElement("div");
  var text = document.createTextNode("第四个div");
  d4.appendChild(text);
   
  var parentDiv = document.getElementById("parentDiv");
   
  parentDiv.appendChild(d4);
}
  
</script>
   
<button onclick="appendDiv()">追加第4个div</button>

在这里插入图片描述
2.在指定位置插入节点
①创建新节点
②获取父节点
③获取插入位置的子节点
④通过父节点的insertBefore(①,③)插入到③中节点之前
全过程涉及了父、子、子三个节点

<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
   
<script>
   
function insertDiv(){
  var d25=  document.createElement("div");
  var text = document.createTextNode("第二点五个div");
  d25.appendChild(text);
   
  var parentDiv = document.getElementById("parentDiv");
  var d3 = document.getElementById("d3");
   
  parentDiv.insertBefore(d25,d3);
}
  
</script>
   
<button onclick="insertDiv()">在第二和第三之间，插入第二点五个div</button>

在这里插入图片描述

十一、例题：表格排序

<style type="text/css">
    table {
        width: 600px;
        text-align: center;
        border-collapse: collapse;

    }

    td {
        border-bottom: solid 1px gray;
        width: 25%;
        padding: 10px;
    }

    a {
        text-decoration: none;
        color: #0000FF;
    }
</style>
<table> 
    <tr>
        <td><a href="#nowhere" onclick="sort1(0)">id</a></td>
        <td><a href="#nowhere" onclick="sort1(1)">名称</a></td>
        <td><a href="#nowhere" onclick="sort1(2)">血量</a></td>
        <td><a href="#nowhere" onclick="sort1(3)">伤害</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>garee</td>
        <td>340</td>
        <td>58</td>
    </tr>
    <tr>
        <td>2</td>
        <td>teemo</td>
        <td>320</td>
        <td>76</td>
    </tr>
    <tr>
        <td>3</td>
        <td>annie</td>
        <td>380</td>
        <td>38</td>
    </tr>
    <tr>
        <td>4</td>
        <td>deadbrothe</td>
        <td>400</td>
        <td>90</td>
    </tr>
</table>
 
<script type="text/javascript">
    var sum = 0; //单数小到大排序，双数大到小排序
    function sort1(t) {
        var a = document.getElementsByTagName("td");
        var b = a[4 + t].parentNode; //b是<tr>
        var c = b.parentNode;   //c是<table>
        sum++;
        for (i = 4 + t; i < 16 + t; i = i + 4) {
            for (j = i + 4; j <= 16 + t; j = j + 4) {
                if (sum % 2 == 0) {
                    if (a[i].innerHTML > a[j].innerHTML) {
                        c.insertBefore(a[j].parentNode, a[i].parentNode);
                    }
                }
                else {
                    if (a[i].innerHTML < a[j].innerHTML) {
                        c.insertBefore(a[j].parentNode, a[i].parentNode);
                    }
                }
            }
        }
    }
</script>
Vkerei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
爬虫第四课 数据处理
徐加七的博客
11-01 6069
页面解析和数据提取 一般来讲对我们而言，爬虫需要抓取的是某个网站或者某个应用的内容，提取有用的数据。响应内容一般分为两种，非结构化的数据 和 结构化的数据。 结构化数据：先有结构、再有数据 非结构化数据：先有数据，再有结构， 不同类型的数据，我们需要采用不同的方式来处理。 六、数据处理 结构化的数据处理 HTML 文件 正则表达式 XPath CSS选择器 JSON 文件 JsonPa...
HTML DOM（样式、事件）
litengbin的博客
01-17 426
HTML DOM 样式 一个元素节点的style属性即对应的css 1.隐藏和显示 通过给元素的style.display 赋值，改变显示还是隐藏 隐藏div 显示div 这是一个div function hide(){ var d = document.getElementById("d"); d.style.display="n
Javascript专项练习-选择题(更新中）
热门推荐
weixin_43545225的博客
04-19 4万+
编程语言-Javascript专项练习 1. 以下语句的执行结果是什么？ console.log('one'); setTimeout(function(){ console.log('two'); },0); console.log('three'); console.log('four'); 答案：“one” “three” “four” “two” 解析：回调时，被回调的函数会被放在e...
DOM笔记
qq_60602244的博客
10-15 1695
目录DOM简介获取页面中的元素1.根据ID获取2.根据标签名获取(1)document.getElementsByTagName('标签名')(2)element.getElementsByTagName('标签名')3.通过HTML5新增方式获取(1)getElementByClassName(2)querySelector(3)querySelectorAll4.特殊元素的获取(1)获取body元素(2)获取html元素执行事件的步骤1.获取事件源2.注册事件（绑定事件）3.添加事件处理程序（采取函数赋
JSDOM笔记总结
aurora
04-27 397
JSDOM对象讲解1.讲解document对象1.1DOM的含义1.2学习JS DOM中 1.讲解document对象 本章节讲的是document DOM对象： 首先来了解下什么是document以及DOM： Attention： 首先来说一下这个document对象（通俗讲就是窗口文档对象），一个html文档就是一个窗口文档对象 document属于window对象下的一个子对象，所以你会发现使用DOM时，基本上不需要使用window.document 1.1DOM的含义 DOM(documen
HTML DOM学习笔记
Saurfang
07-27 416
  DOM 是Document Object Model( 文档对象模型 )的缩写。  DOM是把html里面的各种数据当作对象进行操作的一种思路。 (面向对象的角度看html的标签) 节点概念 DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点    获取节点 document.getElementById ...
JavaScript HTML DOM 学习笔记
weixin_51302779的博客
12-12 498
JavaScript HTMLDOM学习笔记，随手一记
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
JavaScript HTML DOM学习笔记.emmx
02-11
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
dom笔记1
08-08
在"DOM笔记1"中，我们主要探讨了与CSS相关的DOM操作以及一些实际应用案例。 首先，我们要理解DOM中的三种基本节点类型：Element节点，Text节点和Comment节点。Element节点代表HTML元素，如`<div>`或`<p>`；Text节点...
javascript DOM笔记 1
08-08
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口。它允许程序和脚本动态更新、添加或删除页面中的元素和属性。在本文中，我们将深入探讨一些关键的DOM操作，特别是与获取和操作元素及...
js DOM的学习笔记
12-09
JavaScript DOM（文档对象模型）是Web开发中一个关键的概念，它允许我们使用JavaScript来操作HTML或XML文档的结构、内容和样式。DOM将HTML页面解析为一个由节点组成的树形结构，每个HTML元素都是树中的一个节点，...
前端笔记 之 HTML DOM
NONhappiness的博客
03-12 148
DOM是W3C的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。核心DOMXML DOMHTML DOM：(HTML的标准对象模型，HTML的标准编程接口，W3C标准)，是关于如何获取、修改、添加或删除HTML元素的标准。...
黑马前端pink 教学DOM 笔记
weixin_63658047的博客
01-04 744
DOM知识大全（一篇学完DOM）
Mnist数据集，用于人工智能相关基础模型的学习及编程练习
09-06
Mnist数据集，用于人工智能相关基础模型的学习及编程练习
水空两用无人机动力系统设计与研究.pdf
最新发布
09-06
水空两用无人机动力系统设计与研究.pdf
大神asp新闻发布系统毕业课程设计项目+论文
09-06
编号：55 摘要：随着计算机技术的广泛应用,在新闻发布中引入计算机管理技术,成为一个值得深入研究的问题。本系统采用ASP+ACCESS作为开发环境,本文首先概要的论述了ASP的有关知识与现状,之后，对本系统作了系统的描述,在此基础上，对系统的总体框架和数据库进行了设计，然后，对开发一个小型的新闻信息发布管理系统的各个关键模块实现进行了详细说明。 关键词： 新闻发布，新闻管理，asp，access 目 录 第一章 前　言 1 第二章 系统概述 2 2.1 开发背景 2 2.2 可行性分析 2 2.3 需求分析 3 2.4 asp技术概述 3 2.4.1 ASP的特点 3 2.4.2 ASP的工作原理 4 2.4.3 ASP环境的安装与配置 5 2.5 Access 2003 数据库工具概述 5 2.5.1选择Access2003 作为后台数据库 6 2.5.2 ADO开发数据库 6 第三章 总体设计 8 3.1 系统总体功能设计 8 3.2 系统数据库设计 9 3.2.1 超级管理员表(admin表)设计 9 3.2.2 新闻信息表(news表)设计 10 3.2.3 新闻栏目表(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值