HTML DOM入门

HTML DOM

1.节点概念

DOM将所有的html转化成节点

整个文档 是一个节点
元素是节点
元素属性 是节点
元素内容 是节点
注释也是节点

example

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

2. 获取节点

2.1 通过id获取元素

一个元素对应的id时唯一的

通过document.getElementByld获取某个元素对应的元素节点对象

2.2 通过标签名称获取元素节点

所有的元素都有标签名

通过 document.getElementByTagName 根据标签名称火炬一个元素数组

2.3 通过类名获取元素节点

document.getElementByClassName

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

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>

2.5 为什么会获取不到？

<html>
  
<script>
var  div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
 
<div id="d1">hello HTML DOM</div>

JavaScript是解释型语言，是顺序执行的

2.6 获取属性节点

首先通过 getElementById 获取元素节点

然后通过元素节点的attribute获取其下所有的属性节点。是数组形式

如果想获取一个指定属性的值，可以采用如下风格

as["id"].nodeValue

nodeName 和 nodeValue 表示一个节点的名称和值

2.7 获取内容节点

document.getElementById获取元素节点

通过childNodes获取其素有子节点，其中第一个子节点就是其内容节点

然后借助 nodeName 和 nodeValue 把内容节点的名称和值打印出来

<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.nodeNmae);
    document.write("div的内容节点值是："+ content.nodeVal</script>
</html>

3 节点的属性

3.1 节点的名称

nodeName

document.nodeName 文档的节点名 document

div1.nodeName 元素的节点名是 div

div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id

div1.childNodes[0].nodeName 内容的节点名对应的text

3.2 节点值

nodeValue

document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容即： #text

3.3 节点类型

nodeType

document.nodeType 文档的节点类型，是 9
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3

节点类型

3.4 元素的文本内容

修改与获取内容的值可以通过childNodes[0].nodeValue进行

还有个简便办法就是通过innerHTML进行，效果相同

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

3.5 元素上的属性

元素的属性id value 可以通过.直接访问

元素的自定义属性，可hi通过以下两种方式获取

getAttribute("test")
attributes["test"].nodeValue

4 样式

4.1 隐藏和显示

通过给style.display复制，改变现实还是隐藏

4.2 改变背景色

style.backgroundColor

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

Exercise

<style>
    table{
        horder-collapse:collapse;
        width:90%;
    }
    tr.odd{
       background-color : #f8f8f8; 
    }
    tr.head{
        border-bottom-width:2px;
    }
    tr{
        border-bottom-style:solid;
        border-bottom-width:1px;
        border-bottom-color:lightgray;
        height:35px;
    }
    td{
        width:25%;
        text-align:center;
    }
</style>
<table>
    <tr class = "head">
    <td>id</td>
    <td>名称</td>
    <td>血量</td>
	<td>伤害</td>	
    </tr>
</table>

5 事件

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

鼠标事件

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

当在组件上鼠标经过的时候，会触发onmousemove事件
当在组件上鼠标进入的时候，会触发onmouseover事件
当在组件上鼠标退出的时候，会触发onmouseout事件

注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发

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


</script>

点击事件

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

<input type = "button" onclick = "singleClick()" ondbclick = "doubliClick()" value = "用于演示单击和双击">
<div id ="message">
</div>
<script> function singleClick(){}
function doubleClick(){}
</script>

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

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

5.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 = "http://how2j.cn/example.gif"/>

5.8 当前组件

this表示触发事件的组件，可以在调用函数的时候，作为参数传进去

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

5.9 阻止事件的发生

比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交

在调用函数的时候，增加一个return
2. 在函数中，如果发现用户名为空，则返回false
3. 当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");
    
}</script>

6 节点关系

6.1 节点关系图

节点关系图

6.2 父节点关系

通过parentNode获取父节点

6.3 同胞节点关系

previousSibling和nextSibling属性获取前一个，以及后一个同胞节点。

6.4 子节点关系

firstChild 第一个子节点
lastChild 最后一个子节点
childNodes 所有子节点

6.6 childNodes 和 children的区别

childNodes会包含文本节点

children排除文本节点

7 创建节点

7.1 创建元素节点

creatElement 创建元素节点

appendChild将一个元素节点加入到另一个元素节点中去

<html>
    <div id = "d">
        Hello HTML DOM 
    </div>
    <script>
    function add(){
        var hr = document.c
    }</script>
</html>

7.2 创建文本节点

】】

];[['']]

posted @ 2022-01-15 10:06 NJU_Joker 阅读(56) 评论(0) 收藏举报

刷新页面返回顶部

我爱谷爱凌