JavaScript学习四 DOM

最新推荐文章于 2024-08-14 15:45:18 发布

禾子不枯萎

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量114

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/haojieji/article/details/126325195

版权

DOM

DOM初步认知

     DOM（文档对象模型）是JavaScript中的一部分，它和ECMAscript核心，BOM（浏览器对象模型）组成完整的JavaScript。
     DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”（要是没有W3C制定标准，每个浏览器对图片定义不同的标签，那针对每个浏览器要写不同的代码，这个肯定是行不通的）
     W3C DOM 标准被分为 3 个不同的部分：1，核心 DOM - 针对任何结构化文档的标准模型；2，XML DOM - 针对 XML 文档的标准模型；3，HTML DOM - 针对 HTML 文档的标准模型

事件

事件是什么：HTML DOM 允许 JavaScript 对 HTML 事件作出反应。简而言之，事件就是用户和浏览器之间的交互行为，比如点击按钮（onclick），鼠标移动（onmousemove）…

//点击按钮事件
    <script>
        window.onload=function(){     //onload 一张页面或一幅图像完成加载。 
            var but1=document.getElementById('a');//getElementById() 返回对拥有指定 id 的第一个对象的引用。 
        //绑定一个单击事件
        //像这种单击事件绑定的函数，称为单击响应函数
        but1.onclick=function(){ //onclick 当用户点击某个对象时调用的事件句柄。 
            alert("nihao~");
        };
        }
    </script>
    <button id="a">a1</button>

方法和属性

节点

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
在这里插入图片描述

方法和属性

1，方法：
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。
常用对象方法：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
2，属性
nodeName 属性规定节点的名称。
•nodeName 是只读的
•元素节点的 nodeName 与标签名相同
•属性节点的 nodeName 与属性名相同
•文本节点的 nodeName 始终是 #text
•文档节点的 nodeName 始终是 #document

tips：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
•元素节点的 nodeValue 是 undefined 或 null
•文本节点的 nodeValue 是文本本身
•属性节点的 nodeValue 是属性值
nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：
元素 1
属性 2
文本 3
注释 8
文档 9

通过Document对象获取元素节点

 <script>
  //  1,getElementById() 返回对拥有指定 id 的第一个对象的引用。 
        window.onload=function(){     //onload 一张页面或一幅图像完成加载。 
            var but1=document.getElementById('a');//getElementById() 返回对拥有指定 id 的第一个对象的引用。 
        //绑定一个单击事件
        //像这种单击事件绑定的函数，称为单击响应函数
        but1.onclick=function(){ //onclick 当用户点击某个对象时调用的事件句柄。 
            alert("nihao~");
        };
        }
    </script>
    <button id="a">a1</button>
    

    <script>
  // 2,getElementsByName() 返回带有指定名称的对象集合。 
        window.onload=function(){
            var bt2=document.getElementsByName("hao");
            alert(bt2.length);
        }
    </script>

    <input name="hao" type="text" />
    <input name="hao" type="text" />
    <input name="hao3" type="text" />
    <input name="hao2" type="text" />
    <input name="hao1" type="text" />

    <script>
  //3,getElementsByTagName() 返回带有指定标签名的对象集合。 
        var bt3=document.getElementsByTagName("input");
        alert(bt3.length);
    </script>

tips:如果需要直接读取元素节点属性，直接采用元素.属性名，如：元素.name，元素.value（但是class属性不能采用这种方法，读取class属性需要使用元素.className

通过具体元素节点调用获取元素节点的子节点

    <li id="hao11">
        <input name="hao" type="text" />
        <input name="hao" type="text" />
        <input name="hao3" type="text" />
        <input name="hao2" type="text" />
        <input name="hao1" type="text" />
    </li>
    <p name="hao2">  <input name="hao" type="text" />
        <input name="hao" type="text" />
        <input name="hao3" type="text" />
        <input name="hao2" type="text" />
        <input name="hao1" type="text" /></p>
    <a name="hao3">  <input name="hao" type="text" />
        <input name="hao" type="text" />
        <input name="hao3" type="text" />
        <input name="hao2" type="text" />
        <input name="hao1" type="text" /></a>
    <a name="hao4">  <input name="hao" type="text" />
        <input name="hao" type="text" />
        <input name="hao3" type="text" />
        <input name="hao2" type="text" />
        <input name="hao1" type="text" /></a>
    <li name="hao5">&</li>

    <script>
        //1,getElementsByTagName,id为hao11下面input标签
        var btn1=document.getElementById("hao11");
        var tag=btn1.getElementsByTagName("input");
        alert(tag.length);
        //2,childNodes,获取包括文本节点在内的所有节点，标签之间的空白也算文本节点IE8及以下不会将空白当成文本节点
        var ch=btn1.childNodes;//children属性可以获取当前元素的所有子元素，不包括空白
        alert(ch.length);
        //3，firstChild可以获取当前元素的第一个子节点包括空白，btn1.childNodes[0]也可以
        //firstElementChild可以获取第一个子元素不包括空白,但不支持IE8及以下浏览器
        alert(btn1.firstChild);
        //4，lastChild同上
        alert(btn1.lastChild);

    </script>

通过具体节点调用获取父节点和兄弟节点

<script>
        //1.parentNode属性，宝石当前节点的父节点
        var btn1=document.getElementsByName("hao");
        var btn=btn1.parentNode;
        alert(btn.innerHTML);//获取文本内容，inerText，nodeValue也可以
        //2.previousSibling属性表示当前节点的前一个兄弟节点,可能获取到空白元素
        var btn1=document.getElementsByName("hao4");
        btn1.previousSibling;//previousElementsSibling也可以，但IE8及以下不可
        //3.nextSibling同上
    </script>

dom查询的其他方法

<div class="box"><div></div></div>
<div></div>

<script>
    //1.document中有一个body属性，保存的是body标签的引用
    var body=document.body;
    //2.document.documentElement保存html根标签
    var doc=document.documentElement;
    //3.document.all代表页面里所有元素,document.getElementsByTagName("*")起一样效果
    var all=document.all;
    //4,getElementsByClassName根据元素class属性值查询一组元素节点对象，不支持IE8及以下
    var box=document.getElementsByClassName("box");
    //5,document.querySelector需要选择器的字符串作为参数
    //根据css查询器查询元素节点对象,但只返回一个，querySelectorAll可以解决
    document.querySelector(".box div");

DOM增删改

<div id="ct">
    <div id="hao">hao</div>
    <div id="ni">ni</div>
    <div id="shan">shan</div>
</div>
<script>
    var ct=document.getElementById("ct");
    var shan=document.getElementById("shan");
    //1,增
    //createElement() 创建元素节点,根据标签名创建并将创建好的对象返回
    var li=document.createElement("li");//alert(btn)
    //createTextNode() 创建文本节点 
    var tex=document.createTextNode("nihao");
    //appendChild() 把新的子节点添加到指定父节点 
    li.appendChild(tex);//页面中还未出现
    var hao=document.getElementById("hao");
    hao.appendChild(li);
    //innerHTML增加
    //ct.innerHTML+="<li>good</li>";//将之前的删除在添加，在加innerHTML中的，动静太大
    var li=document.createElement("li");
    li.innerHTML="good";
    ct.appendChild(li);
    

    //2，删
    //removeChild() 删除子节点 父节点.removeChild(子节点)
    ct.removeChild(shan);//shan.parentNode.removeChild(shan)

    //3，改
    //insertBefore() 在指定的子节点前面插入新的子节点,父节点.insertBefore(new,old)
    var li1=document.createElement("li");
    var tex1=document.createTextNode("world");
    li1.appendChild(tex1);
    var hao=document.getElementById("hao");
    ct.insertBefore(li1,hao);
    //replaceChild() 替换子节点,父节点.replaceChild(new,old)
    var ni=document.getElementById("ni");
    ct.replaceChild(li1,ni);



</script>

注意：dom修改css
通过JS修改CSS样式的语法：元素.style.样式名=样式值比如:box1.style.width=100px
这个括号内的只能读取不能修改（只能读取内联样式）：box1.style.width（读取当前显示的样式，没有设置，获取默认值。IE浏览器支持：元素.currentStyle.样式名
其他浏览器使用getComputedStyle(获取样式的元素，传递伪元素一般为null).属性，返回一个封装当前元素对应样式的对象，若获取样式没有设置获取真实值，而不是默认值，IE8及以下不支持
所有浏览器都支持：

function getStyle(obj,name){
			if(window.getComputedSytle){
			return getComputedSytle(obj,null)[name];
			}else{
			return obj.currentStyle[name];
			}
			//异曲同工
			//return window.getComputedSytle?getComputedSytle(obj,null)[name]:obj.currentStyle[name];
}

)
如果出现像background-color这样的属性将-删除将后面的字母大写（驼峰命名法）。
这些通过style属性设置的样式都是内联样式，拥有较高优先级，但遇到！important就会失效
其他样式相关
1，clientWidth和clientHeight
这两个属性分别获取元素的可见宽度和高度，包括内容区域和内边距，返回不带px的数字，但只能读不能修改

box1.clientWidth;
box1.clientHeight;

2,offsetWidth,offsetHeight，offsetParent，offsetLeft,offsetRight
获取元素整个宽度和高度，包括内容区域，内边距，边框box.offsetWidth;
offsetParent获取当前元素的定位父元素，获取到当前元素最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位则返回body
offsetLeft,offsetRight获取当前元素相对于父元素的水平偏移量，垂直偏移量
3,scrollHeight 返回元素的滚动区域整体高度;scrollLeft 返回元素左边缘与视图之间的距离;scrollWidth 返回元素的滚动区域整体宽度。

scrollHeight-scrollTopclientHeight说明垂直滚动条滚动到底了
scrollWidth-scrollLeftclientWidth说明水平滚动条到底了

禾子不枯萎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习四 DOM

其他浏览器使用getComputedStyle(获取样式的元素，传递伪元素一般为null).属性，返回一个封装当前元素对应样式的对象，若获取样式没有设置获取真实值，而不是默认值，IE8及以下不支持。tips:如果需要直接读取元素节点属性，直接采用元素.属性名，如：元素.name，元素.value（但是class属性不能采用这种方法，读取class属性需要使用元素.className。（要是没有W3C制定标准，每个浏览器对图片定义不同的标签，那针对每个浏览器要写不同的代码，这个肯定是行不通的）...
复制链接

扫一扫