Dom 文档对象模型

最新推荐文章于 2023-02-01 17:45:14 发布

信天鸽

最新推荐文章于 2023-02-01 17:45:14 发布

阅读量247

点赞数

分类专栏： JavaScript(js)

本文链接：https://blog.csdn.net/chaoleshan/article/details/77948978

版权

JavaScript(js) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Dom
动态改变页面内容
Dom是操作Html和xML一组API，可以实现动态页面的变化
Dom节点树：每个Html或Xml文档被浏览器加载会在内存中生成Dom树
div,p,h1叫做标签，现在叫做Dom对象，Dom节点，Dom元素
每个标签都是HtmlElement对象，形如HtmlxxxElement,例如div标签是HtmlDivElement对象
节点的三种类型：< div id=”div1” >我是div1
1.标签节点：div
2.属性节点：id=”div1”
3.文本节点：我是div1
增删改的代码如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     <script type="text/javascript">
          /* 增加*/
         function testAdd(){
            var div5=document.createElement("div");
            //创建标签节点
            div5.id="div5";
            //创建标签文本
             var div5TextNode=document.createTextNode("我是div5");
             div5.appendChild(div5TextNode);
             var div3=document.getElementById("div3");
            div3.parentNode.insertBefore(div5,div3);
         }
         //删除 删除div1
         function testDele(){
             var div1=document.getElementById("div1");
             if(div1!=null){
                 div1.parentNode.removeChild(div1);
             }else{
                alert("null");
             }
         }
         //修改:把div3修改成文本框
         function testUpdate(){
            var username=document.createElement("input");
            username.type="text";
            username.name="username";
            username.id="username";
            username.value="请输入用户名";
            var div3=document.getElementById("div3");
            div3.parentNode.replaceChild(username,div3);
         }
     </script>
    </head>
    <body>

        <div id="div1">
            我是标签1
        </div>
        <div id="div2">
            我是标签2
        </div>
        <div id="div3">
            我是标签3
        </div>
        <div id="div4">
            我是标签4
        </div>
     <input type="button" name="bt1" id="bt1" value="增加div5" onclick="testAdd();">
    <input type="button" name="bt2" id="bt2" value="删除div1"  onclick="testDele();"/>
    <input type="button" name="bt3" id="bt3" value="修改div3"  onclick="testUpdate();"/>
    </body>
</html>

牢记两个方法：document.createElement(“”) 创建元素节点
document,getElementById(id) 返回对拥有指定ID的第一个对象的引用
二、js库：一系列函数和对象的集合，别人写好了，直接拿来用，类似于java中的包
直接通过src=“路径”来引入js.js文件
三、Dom查询：根据id，name,class等查
1.id
document.getElementById(“”) ;
2.根据name查
document.getElementByName(“”);
3.根据标签名来查询元素的集合
document.getElementByTagName(“div”);
技能：得到标签文本：divArr[i].innerHTML.
4.得到所有标签
document.getElementByTagName(“*”);
5.根据class的值查询元素的集合：
docunment.getElementByClassName(“class1”);
window.οnlοad=function()；相当于绑定事件处理函数
四、html中的dom编程
1.使用数组
document.image[0]…查询第一个img标签
document.links[0]….查询访问超链接
document.form[0]..查询第一个表单元素
2.访问表单中的表单域
可以根据表单域的name值或Id值进一步
document.form[0].username
document.form[0].username.value 都可以得到
注意：在此表单域的名称千万不可以起成submit，失效，如果写成的话，相当于动态的给表单对象加了一个属性叫submit,from,submit属性把form对象submint()方法给覆盖了，造成submit（）方法失效
3.通过节点之间的关系查询
注意：如果< body>和< div > 中有空格隔开的话，第一个孩子节点是text（文本节点）
可以通过previoussibling来获取对应节点的下一个节点内容
五、得到、设置Dom的属性
和java中的setter和getter方法一样
1、html DOM
对象名.属性名
比如直接 img .src=”2.jpg”;
2、Core DOM
dom节点.getAttribute(“src”);//得到属性
dom节点.setAttribute(“src”,”mypicture2.jpg”);//设置属性
3. 对象名[“属性名”]
var aaa = “src”;
img1[aaa] = “../../img/23.jpg”;
六、单一修改模式
需求：修改DIV1的背景颜色改为绿色
div.style 得到css2properties对象
div.style.backgroundColor=”green”;
七、修改整套样式
div.class1{
width:800px;
height:700px;
}
div.class2{
width:900px;
height:800px;
}
var div1=document.getElementByClass(“class2”);
八、div的显示和隐藏
1.不占位
隐藏：div对象.style.display=”none”;
显示：div对象.style.display=”block”;
2.占位
隐藏：div对象.style.visibility=”hidden”;
显示：div对象.style.visibility=”visible”;
九、事件驱动编程
1.事件源：按钮
2.事件名称：onclick,onchange
3.事件处理函数：发生事件以后，执行的函数叫做事件处理函数
4.事件对象
常用的事件
1.文本框事件
onfocus(得到焦点) onblur（失去焦点）
2.鼠标事件
onmouseover鼠标悬停
onmouseout鼠标移出
十、绑定事件的三种方式
1.xhtml绑定方式
< input type=”button” name=”btn1” οnclick=”test();test2()”/ >
优点：写起来简单，绑定多个函数，可以传参
缺点：1.内容和行为没有分离2.多个按钮绑定多个事件，一个一个绑定。3.dom动态创建对象时，不能使用这种方式了
2.dom绑定方式
dom对象.事件=事件处理函数
function test(){ alert(“按钮被点击了”)}
window.οnlοad=function(){
var btn1=document.getElementById(“btn1”);
btn1.οnclick=test;
}
也可以直接写成”btn1.οnclick=function(){alert(“test”)}
立即调用匿名函数：（function(){alert(“test”)}();
优点：可以多个对象绑定事件
缺点：1.只能绑定一个事件
3.第三种绑定方式和两种事件模型
两种模型：1.Dom2事件模型 firefox 非ie浏览器传值这个模型
2.IE事件模型：ie浏览器
区别：
1.第三种绑定方式代码不一样
2.事件的传播机制不一样
《1》Dom2绑定方式
var btn1=dg(“btn1”);
btn1.addEventListener(“click”,test);
btn1.removeEventListener(“click”,test2);
《2》ie绑定方式
btn1.attachEvent(“click”,test);
btn1.detachEvent(“事件名称”,事件处理函数)

信天鸽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom 文档对象模型

Dom 动态改变页面内容 Dom是操作Html和xML一组API，可以实现动态页面的变化 Dom节点树：每个Html或Xml文档被浏览器加载会在内存中生成Dom树 div,p,h1叫做标签，现在叫做Dom对象，Dom节点，Dom元素每个标签都是HtmlElement对象，形如HtmlxxxElement,例如div标签是HtmlDivElement对象节点的三种类型：< div i
复制链接

扫一扫

专栏目录