【小白入门】始于前端UI（一）——DOM简介

最新推荐文章于 2023-02-09 14:00:31 发布

阿阿阿是阿翼啊

最新推荐文章于 2023-02-09 14:00:31 发布

阅读量344

点赞数

分类专栏： HTML 文章标签： dom

本文链接：https://blog.csdn.net/weixin_43226986/article/details/111371199

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

D– Document，没有网页，DOM就无从谈起。浏览器根据网页创建一个文档对象。
O– Object，对象。对象有三种：①用户自定义对象；②内建对象，JavaScript中的对象，如array, math, date等；③宿主对象，由浏览器提供的对象，如window对象。
M– Model，模型。

DOM可以简单的理解为网页文档的树（模型）。

2. 节点类型

2.1 nodeType

DOM将网页表示为一棵树，树模型的节点类型有多种。

元素节点，nodeType为1——HTML标签
属性节点，nodeType为2——包含在标签里，所以属性节点总是被包含在元素节点当中
文本节点，nodeType为3——文本
文档节点，nodeType为9

注意：属性节点实际上是附属于元素的，所以不被看做是元素的子节点，因为并没有被当做是DOM的一部分。

2.2 nodeName

元素节点，nodeName就是标签名。元素节点也可以通过tagName获取标签名；
属性节点，nodeName是属性名称；
文本节点，nodeName永远是#text；
文档节点，nodeName永远是#document；

2.3 nodeValue

元素节点，不包含文本，所以nodeValue不可用；
属性节点，nodeValue值为属性值；
文本节点，nodeValue值为文本值

<body>
<h1 id="h1">An HTML Document</h1> 
<p><input id="elementNode" type="button" value="查看元素节点的各项值"></p> 
<p><input id="text" type="button" value="查看文本节点的各项值"></p> 
<p><input id="documentNode" type="button" value="查看文档节点的各项值"></p> 
<p><input id="property"type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="property"  value="本按钮的属性节点演示" /></p> 
<script type="text/javascript">
function showElement(){
var element=document.getElementById("h1");
alert('nodetype:'+element.nodeType);//nodeType=1 
alert('nodeName:'+element.nodeName); 
alert('nodeValue:'+element.nodeValue); //null 
alert('element:'+element); 
}
function showText(){ 
var element=document.getElementById("h1"); 
var text=element.childNodes[0]; 
alert('nodeType:'+text.nodeType); //nodeType=3 
alert('nodeValue:'+text.nodeValue); //文本节点的nodeValue是其文本内容 
text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。 
alert('nodeName:'+text.nodeName); 
alert(text.data); //data同样是其内容,这个属性下同样可以增删改。 
} 
function showDocument(){ 
alert('nodeType:'+document.nodeType); //9 
alert('nodeName:'+document.nodeName); 
alert(document); 
} 
function showAttr(){ 
var property=document.getElementById("property"); //演示按钮，有很多属性 
var attrs=property.attributes; 
for(var i=0;i<attrs.length ;i++){ 
var attr=attrs[i]; 
alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2 
alert('attr:'+attr); 
alert('attr.name:'+attr.name+'='+attr.value); 
} 
} 
function demo(){
    var element=document.getElementById("elementNode");
    element.onclick=showElement;//按钮1获取节点的nodeType值
    var text=document.getElementById("text"); 
    text.onclick=showText; 
    var documentNode=document.getElementById("documentNode"); 
    documentNode.onclick=showDocument; 
    var property=document.getElementById("property"); 
    property.onclick=showAttr;
}    
window.onload=demo;
</script>
</body>

2.4 innerHTML

innerHTML只对元素节点有用，获取元素节点内容，也就是元素节点包含的文本节点的值。其他节点使用nodeValue。

3. HTML DOM访问节点

DOM的思想就是每个节点都是对象，是对象我们就可以通过一些方法获取它或者改变它的属性等。

可以通过多种方法来查找DOM元素：

a、使用getElementById()和getElementByTagName()和getElementsByClassName()方法

b、通过一个元素节点的parentNode、childNodes、children、firstChild和lastChild和previousSibling和nextSibling

c、通过document.documentElement和document.body

document.documentElement代表元素，document.body代表元素

4. HTML DOM操作

4.1 创建新元素（节点）

createElement()//创建一具体的元素
createTextNode()//创建一个文本节点
createDocumentFragment()//创建一个DOM片段

4.2 一个demo：通过InnerHTML更改元素内容，通过appendChild新增元素，通过removeChild移除元素

<body> 
<input type="text" id="text"/>
<input type="button" value="添加li" id="button">
<ul>
</ul>
<script>
window.onload=function(){
    var obutton=document.getElementById("button");
    obutton.onclick=createLi;
}
function createLi(){
    var oText=document.getElementById("text");
    var oUl=document.getElementsByTagName("ul")[0];
    var oLi=document.createElement("li");
    oLi.innerHTML=oText.value;
    var oA=document.createElement("a");
    oA.innerHTML="删除";
    oA.href="javascript:;";
    oA.onclick=function(){
        oUl.removeChild(this.parentNode);
    }
    oLi.appendChild(oA);
    oUl.appendChild(oLi);
}
</script>
</body>

4.3 更改HTML标签的特性

getAttribute()，setAttribute()，removeAttribute()

<body>
    <a href="#">starof</a>
<script type="text/javascript">
        var a=document.getElementsByTagName("a")[0];  
        alert(a.getAttribute("href"));
        a.setAttribute("href","http://www.cnblogs.com/starof");
        alert(a.getAttribute("href"));
        a.removeAttribute("href");
        alert(a.getAttribute("href"));
</script>
</body>

4.4 事件操作

事件处理的工作机制：

在元素添加了事件处理函数后，一旦预定事件发生，相应的JavaScript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。
比如：给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript返回给onclick事件处理函数的值是true，onclick事件处理函数将认为“这个链接被点击了”；反之如果那段JavaScript代码返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个函数没有被点击”。

参考链接: https://www.cnblogs.com/starof/p/4478481.html

阿阿阿是阿翼啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【小白入门】始于前端UI（一）——DOM简介

目录layui的简单使用前端必备技术及工具layui的简单使用layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。以上，是layui官网对该工具的定位，比起VUE，layui更加轻量好上手，官方文档也比较详细，有一系列的示例，如果资金充足还可以购买layuiAdmin等全套的前端开发模板。前端必备技术及工具...
复制链接

扫一扫