DOM：文档对象模型，将标记语言文档的各个元素封装为一个对象，通过树结点的方式控制html文档内容

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  • 文档是一个文档节点。
  • 所有的HTML元素都是元素节点。
  • 所有 HTML 属性都是属性节点。
  • 文本插入到 HTML 元素是文本节点。are text nodes。
  • 注释是注释节点。

可以通过获取的变量修改属性。（查看API文档，查找属性）

Document:文档对象

Element:元素对象

Arrtribute:属性对象

Text:文本对象

Comment:注释对象

Node:节点对象，其他5个的父对象

核心DOM模型：

Document对象:     windows.document为当前对象

Element元素对象

获取Element：

getElementByID（）：通过元素的id获取元素对象

getElementsByTagName():根据元素名称获取元素对象，返回一个数组

getElementesByClassName():根据class属性值获取元素对象，返回一个数组

getElementsByName():根据name属性值获取元素对象，返回一个数组

创建Element:createElement()

设置Element:setArribute("属性","值")

删除Element：removeArrbute(“属性”)

<body>
        <a>点我</a>
        <input type="button" id="bt_set" value="设置属性">
        <input type="button" id="bt_remove" value="删除属性">
    </body>
    <script>
        var elem=document.getElementsByTagName("a")[0];
       
        var bt=document.getElementById("bt_set");
        bt.onclick=function(){
            elem.setAttribute("href","https://www.baidu.com");
        }
        var bt1=document.getElementById("bt_remove");
        bt1.onclick=function(){
            elem.removeAttribute("href");
        }
    </script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

Node节点对象

所有dom对象都可以被认为是一个节点

添加：appendChild()

删除：removeChild()删除（并返回）当前节点的指定子节点


 超链接两个功能：可以被点击，跳转url。如果禁用跳转功能，url="javascript:void(0)"

//添加子节点
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            div1.removeChild(div2);
 
            //添加子节点
            var div3=document.createElement("div");
            div3.setAttribute("id","div3");
            div1.appendChild(div3);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

改：replaceChild（）：用新节点替换一个子节点

parentNode:获取父节点

HTML DOM:

innerHtml:获取元素内容

=更改元素，+=追加内容

控制元素样式：

(1)元素.style.属性=“”

font-size--->fontSize

(2)提前css写类选择器，js元素.className=""

事件：执行操作，触发代码执行。

οnclick="fun";可以通过js获取元素操作

案例：电灯开关

var light=document.getElementById("light1");
        var flag=false;
        light.onclick=function(){
            if(flag){
                light.src="../../素材图片/灯灭.png";
                flag=false;
            }
            else{
                light.src="../../素材图片/灯亮.png";
                flag=true;
            }       
           
        };
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

【黑马JS笔记】BOM对象&DOM对象&事件_HTML

 

【黑马JS笔记】BOM对象&DOM对象&事件_子节点_02


BOM:浏览器对象模型

将浏览器组成部分封装为对象

组成：浏览器对象（Navigator），浏览器窗口对象(window）,地址栏对象（Location）历史记录对象(History),显示器屏幕对象（screen）

window对象

*不需要创建，直接使用window使用

*window引用可以省略，方法名（）；

弹出方法：

alert

弹出警告框

confirm

确认取消对话框，确定返回true 否则返回false

prompt

输入框，返回用户输入的值

打开关闭方法：

close

关闭浏览器窗口

open

打开一个新的浏览器窗口

定时器方法:

setTimeOut（fun，ms）

指定毫秒后调用函数或计算表达式，返回唯一标识id

clearTimeout(id)

取消由setTimeout（）方法设置的timeout

setInterval(fun ，ms)

按照指定的周期（毫秒）来调用函数或计算表达式

function fun(){
                document.write('hello,world');
            }
            function fun1(){
                document.write('hi');
            }
            //1000毫秒之后执行fun
          var id1=setTimeout(fun,1000);
        //   clearInterval(id1);
            //每1000毫秒执行一次fun1
          var id=setInterval(fun1,1000);
          //取消setInterval
            // clearInterval(id);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

案例：轮播图

var num=1;
        function fun(){
            num++;
            if(num>2){
                num=1;
            }
           
             var img=document.getElementById('pic1');
             img.src="../../素材图片/"+num+".jpg";
        };
        setInterval(fun,2000);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

window属性：

获取其他bom对象：history,location,navigator,screen

var h=history;

获取dom对象

var w=document;

location对象

包含url信息

reload():刷新

href:获取/修改ur

案例：自动跳转首页

<body>
        <p><span id="time">5</span>秒之后,自动跳转首页...</p>
    </body>
    <script>
    
        var s=5;
        function fun(){
            s--;
            var second=document.getElementById("time");
            second.innerHTML=s+"";
            if(s=="0"){
                location.href="https://www.baidu.com";
            }
        }
        setInterval(fun,1000);
    </script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

history对象

包含当前用户访问过的url

获取:（window.）histoty

length:返回当前窗口历史记录url个数

back：后退

forward：前进

go（参数）：加载history列表中的某个具体页面,正数前进几个历史记录