JAVAScript学习3--DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的宁夏网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

DOM能干啥?

    JavaScript 能够改变页面中的所有 HTML 元素
    JavaScript 能够改变页面中的所有 HTML 属性
    JavaScript 能够改变页面中的所有 CSS 样式
    JavaScript 能够对页面中的所有事件做出反应

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:

 

JAVAScript学习3--DOM

查找元素方法:

    1、直接查找:

    getElementByid():    通过 id 找到 HTML 元素
    getElementsByTagName():    通过标签名找到 HTML 元素(列表)
    getElementsByClassName():    通过类名找到 HTML 元素(列表)

    getelementsByName():    通过name属性找到HTML元素(列表)

    2、间接查找:

    parentNode  父节点
    childNodes     所有子节点
    firstChild        第一个子节点
    lastChild     最后一个子节点
    nextSibling     下一个兄弟节点
    previousSibling   上一个兄弟节点
    parentElement    父节点标签元素
    children          所有子标签
    firstElementChild   第一个子标签元素
    lastElementChild   最后一个子标签元素
    nextElementtSibling    下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素

    3、添加删除节点和元素:


操作方法:

    innerText    文本,指定ID下所有文本的拼接,去除间隔的HTML元素
    outerText  写模式下,替换所有子元素
    innerHTML    会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点。
    outerHTML    写模式下,新的元素替换原有的 DOM 树
    value         属性可设置或返回密码域的默认值。获取文本框的值。 

 

Class属性操作(CSS样式表名):

    className 获取所有类名
    classList.remove(cls) 删除指定类
    classList.add(cls)  添加类

checkbox属性:

    checkbox.checked:true选中,false不选

tag标签操作:

    1、createElement()创建标签:   

         每个HTML标签都有自己的属性,属性参照:https://www.w3school.com.cn/jsref/dom_obj_anchor.asp

function append_tag(){
   var a = document.createElement('a')
   var cur = document.getElementById('dd')
   a.innerHTML='click me'
   a.href='http://www.baidu.com'
   a.className='a1'
   cur.appendChild(a)    //添加标签
}
\\----------等同于
var a_tag="click me"

    2、操作标签:

    

    insertAdjacentText('位置',obj) 在指定的地方插入文本内容,如果是HTML对象会以文本形式显示出来
    insertAdjacentHTML('位置',obj) 在指定的地方插入html内容

    位置说明:

        beforeBegin:标签起始位置前(标签前)

        afterBegin:标签起始位置后(标签内)

        beforeEnd:标签结束位置前(标签内)

        afterEnd:    标签结束位置后(标签外)

使用笔记本时上传

    3、标签样式操作style:

var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

    4、位置操作

    document.documentElement.offsetHeight    总文档高度
    document.documentElement.clientHeight    当前文档占屏幕高度
    tag.offsetHeight    自身高度
    tag.offsetTop    距离上级定位高度
    tag.offsetParent 父定位标签
    tag.scrollTop 滚动高度

/*
    clientHeight -> 可见区域:height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域:height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高:height + padding
    scrollTop    -> 滚动高度
    特别的:
        document.documentElement代指文档根节点
*/

 

事件:

    

    addEventListener() 方法用于向指定元素添加事件句柄。

    addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

    你可以向一个元素添加多个事件句柄。

    你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

    你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

    addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

    当你使用 addEventListener() 方法时,  JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

    你可以使用 removeEventListener() 方法来移除事件的监听。

    语法:element.addEventListener(event, function, useCapture);

   

    事件类型:

属性此事件发生在何时...属性此事件发生在何时...
onabort图像的加载被中断。onload一张页面或一幅图像完成加载。
onblur元素失去焦点。onmousedown鼠标按钮被按下。
onchange域的内容被改变。onmousemove鼠标被移动。
onclick当用户点击某个对象时调用的事件句柄。onmouseout鼠标从某元素移开。
ondblclick当用户双击某个对象时调用的事件句柄。onmouseover鼠标移到某元素之上。
onerror在加载文档或图像时发生错误。onmouseup鼠标按键被松开。
onfocus元素获得焦点。onreset重置按钮被点击。
onkeydown某个键盘按键被按下。onresize窗口或框架被重新调整大小。
onkeypress某个键盘按键被按下并松开。onselect文本被选中。
onkeyup某个键盘按键被松开。onsubmit确认按钮被点击。
onunload用户退出页面。

 键盘鼠标事件:

属性描述
altKey返回当事件被触发时,"ALT"是否被按下。
button返回当事件被触发时,哪个鼠标按钮被点击。
clientX返回当事件被触发时,鼠标指针的水平坐标。
clientY返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时,"CTRL"键是否被按下。
metaKey返回当事件被触发时,"meta"键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时,鼠标指针的水平坐标。
screenY返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey返回当事件被触发时,"SHIFT"键是否被按下。

 

小例子:

1、文本框默认文字


 2、添加标签


function b_b(){     var std=document.getElementById('std');     var new_b="";     std.insertAdjacentHTML('beforeBegin',new_b); } function a_b(){     var std=document.getElementById('std');     var new_b="";     std.insertAdjacentHTML('afterBegin',new_b); } function b_e(){     var std=document.getElementById('std');     var new_b="";     std.insertAdjacentHTML('beforeEnd',new_b); } function a_e(){          var std=document.getElementById('std');     var new_b="";     std.insertAdjacentHTML('afterEnd',new_b); }

 3、展开同时隐藏其它子菜单:

        HTML:


    人员管理
                  
    组别管理                   

        JS:

function show_sub_menu(th){
    var parentId = th.id;
    var childId='s'+parentId;
    var childE=document.getElementById('left_menu').children;
    for (var s in childE){
        var e=childE[s].classList;
        console.log(e);
        if (e){
            if (childE[s].id==childId){
                childE[s].classList.add('show');
            }else{
                childE[s].classList.remove('show');
            }
         }
    }
}

 4、标签提交:



    
    提交吧



 

 5、html、css、js页面分离:生产环境的写法。

       每类存储为单独的文件,其中js使用dom添加事件方法,可以html更简洁。

例子:鼠标移动表格行变色

    HTML:


    11111
    11111
    11111
    11111
    11111

     JS:给table添加属性和class

    var t=document.getElementById('tb').classList;
    t.add('tb_style');
    
    var mytrs=document.getElementsByTagName('tr');
    var td_numbers=mytrs.length;
    for (var td=0;td

     css:

.tb_style{
    bacground-color:pink;
}

 6、词法分析:形参--》函数体内函数,编译时函数体内的函数会分配 内存地址,覆盖形参。

function cifa(age){
    console.log(age);        \\function age
    age=22;
    console.log(age);        \\22
    function age(){};
    console.log(age);        \\22
}

age(3)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


新闻名称:JAVAScript学习3--DOM
标题网址:http://bzwzjz.com/article/iighid.html