HTML_DOM

最新推荐文章于 2023-03-03 14:34:11 发布

无忧#

最新推荐文章于 2023-03-03 14:34:11 发布

阅读量1k

点赞数 2

文章标签： html 前端 dom javascript

本文链接：https://blog.csdn.net/weixin_52473454/article/details/121340683

版权

DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。

一.节点概念

DOM把所有的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>

二.获取节点

1.一般节点获取方式

document.getElementById 通过id获取节点。

getElementsByTagName 通过标签名称获取节点。

getElementsByClassName 通过类名获取节点。

getElementsByName 通过表单元素的name获取元素节点。

<body>
<div id="d1">Hello</div>
<div class="d2"> HTML </div>
用户名：<input name="n" border="1px" width="70px"/>
<br />
</body>
 
<script>
function p(s){
	//这是打印函数
    document.write(s);
    document.write("<br>");
}
var div1 = document.getElementById("d1");//通过获取节点
var div2 = document.getElementsByClassName("d2");
var input =document.getElementsByName("n")
var div =document.getElementsByTagName("div")
p("以下分别是通过id，class，name，tagname获取的节点")
p(div1+"   "+div2+"   "+input+"   "+input)
</script>

2.获取节点属性

首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue。
如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性。

<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>

2.获取内容节点

首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。

<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>

三.节点属性

1.节点名称，值，类型

nodeName表示一个节点的名字，nodeValue表示一个节点的值，nodeType表示一个节点的类型
不同的节点类型，对应的节点类型值是不一样的。

<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);

p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);

p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>

2.元素的文本内容，元素上的属性

修改与获取内容的值可以通过 childNodes[0].nodeValue进行。
还有个简便办法就是通过innerHTML进行。效果是一样的。

元素上的属性，比如id,value 可以通过 . 直接访问。

<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>

<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>

四.样式

一个元素节点的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 赋值，修改样式
你也许注意到了style.backgroundColor 这里的backgroundColor和是和css的背景颜色background-color有所不同的
换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。
最好能够通过css的属性名，直接就进行修改了。

<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），焦点相关的事件，分别有获取焦点和失去焦点
当组件获取焦点的时候，会触发onfocus事件。
当组件失去焦点的时候，会触发onblur事件。

鼠标事件（onmousedown，onmouseup，onmousemove，onmouseout），由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
当在组件上鼠标按下的时候，会触发onmousedown事件
当在组件上鼠标弹起的时候，会触发onmouseup事件
当在组件上鼠标经过的时候，会触发onmousemove事件
当在组件上鼠标进入的时候，会触发onmouseover事件
当在组件上鼠标退出的时候，会触发onmouseout事件

键盘事件（onkeydown，onkeypress，onkeyup），由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候，会触发onkeydown事件
当在组件上键盘按下的时候，也会触发onkeypress事件
当在组件上键盘弹起的时候，会触发onkeyup事件
注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的
都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？
onkeydown，可以获取所有键，除了打印键Prts，可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写。
onkeypress，只能获取字符键，不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写。

但是！ 在不同的浏览器上，以上规则是不成立的。说这些都没有卵用，你无法控制用户到底使用哪种浏览器。所以，只要记得keydown和keypress都表示点下了键。。。即可

点击事件（onclick，ondblclick），由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
注2: 自定义函数不要使用click()，这是保留函数名。

变化事件（onchange），当组件的值发生变化的时候，会触发onchange事件
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点。

提交事件（onsubmit），可以在form元素上，监听提交事件，当form元素@提交的时候，会触发onsubmit事件。

加载事件（onload），当整个文档加载成功，或者一个图片加载成功，会触发加载事件
当body元素或者img@加载的时候，会触发onload事件。

2.当前组件

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>

3.阻止事件的发生

<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>

关于DOM节点问题：DOM的节点问题（创建，插入，删除，替换）_无忧#的博客-CSDN博客

无忧#

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML_DOM

DOM 是Document Object Model( 文档对象模型 )的缩写。DOM是把html里面的各种数据当作对象进行操作的一种思路。比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。一.节点概念DOM把所有的html都转换为节点，整个文档是一个节点，元素，元素属性，元素内容，和注释也是节点。<body><div id="d1">hello HTML DOM</div></body><..
复制链接

扫一扫