JavaScript | DOM和Ajax技术

最新推荐文章于 2021-06-08 13:44:32 发布

Bravo！！！

最新推荐文章于 2021-06-08 13:44:32 发布

阅读量196

点赞数

分类专栏： JavaScript 文章标签： js html javascript

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107931955

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

DOM（document object model）文档对象模型

一、获取DOM元素对象

1.document.documentElement
2.document.head
3.document.title
4.document.body

二、获取元素对象的方法

document.getElementById()//通过id找到对象
document.getElementsByTagName()//通过标签名<>找到对象
document.getElementsByClassName()//通过类名class找到对象
document.getElementsByName()//通过名字name的值找到对象（极少使用，表单会用）

<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <h1 id="hid">aaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1 class="hcls">aaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1 class="hcls">aaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1 class="hcls">aaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1 class="hcls">aaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1 class="hcls">aaaaaaaaaaaaaaaaaaaaaaaaa</h1>
</body>
<script>
    hobj=document.getElementById('hid');
    hobjs=document.getElementsByClassName('hcls');
    hobj.style.background='#f0f';
    for(i=0;i<hobjs.length;i++){
        hobjs[i].style.background='#afb';
    }
</script>
</html>

三、元素对象标准属性

obj.id; 
obj.className; 
obj.style; 
obj.title;

<form action="" method=""></form>
//其中action method为标准属性

四、元素对象非标准属性

非标准属性不能用.获取和修改

<form action="" method="" age='5' sex='female' index=4></form>
//其中age sex index是非标准属性
1.obj.getAttribute('age');//获取非标准属性
2.obj.setAttribute('age','50');//设置非标准属性

<body>
    <h1 id="hid" title="javascript" class="hcls" info="123">javascript is useful!</h1>
</body>
<script>
    hobj=document.getElementById('hid');
    alert(hobj.getAttribute('info'));
</script>

实例：把getAttribute()和setAttribute()写成函数来使用


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <h1 info='linux is very much!' id='hid' class='hcls'>linux is very much!</h1>
</body>
<script>
hidobj=document.getElementById('hid');

function getA(obj,attr){
    return obj.getAttribute(attr);
}

alert(getA(hidobj,'class'));

function setA(obj,attr,value){
    obj.setAttribute(attr,value);
}

setA(hidobj,'info','php is very much!');
</script>
</html>

五、元素对象JS属性

obj.tagName;//获取标签名
obj.innerHTML;//获取标签内部内容
obj.outerHTML;//获取标签的全部内容
obj.textContent;//获取标签内部的文本内容，过滤掉标签元素

<body>
    <h1 id='hid'>linux <i>is</i> very much!</h1>
</body>
<script>
    hobj=document.getElementById('hid');
    document.write(hobj.tagName);//H1
    document.write(hobj.innerHTML);//linux <i>is</i> very much!
    document.write(hobj.outerHTML);//<h1 id='hid'>linux <i>is</i> very much!</h1>
    document.write(hobj.textContent);//linux is very much!
</script>

六、直接获取DOM元素对象集合

1.document.links;

<body>
    <p><a href="http://www.baidu.com">百度</a></p>
    <p><a href="http://www.163.com">网易</a></p>
    <p><a href="http://www.qq.com">腾讯</a></p>
</body>
<script>
    objs=document.links;
    alert(objs[0].outerHTML);//<a href="http://www.baidu.com">百度</a>
</script>

2.document.images;收集img标签

<body>
    <p><img src="bk.png" width="100px" /></p>
    <p><img src="dog.png" width="100px" /></p>
</body>
<script>
    imgobjs=document.images;
    for(i=0;i<imgobjs.length;i++){
        imgobjs[i].style.background='#afb';//图片背景色改为绿色
    }
</script>

3.document.forms;

<body>
    <form action="go1.php">
        <p>username:</p>
        <p><input type="text" /></p>
    </form>
    <hr />
    <form action="go2.php">
        <p>username:</p>
        <p><input type="text" /></p>
    </form>
    <button id="btn1">表单1</button>
    <button id="btn2">表单2</button>
</body>
<script>
    btn1=document.getElementById('btn1');
    btn2=document.getElementById('btn2');
    objs=document.forms;
    btn1.onclick=function(){
        objs[0].submit();//单击button1提交表单1
    }
    btn2.onclick=function(){
        objs[1].submit();//单击button2提交表单2
    }

</script>

4.document.anchors;锚点

<body>
    <p><a href="http://www.baidu.com" name="baidu">百度</a></p>
    <p><a href="http://www.163.com" name="163">网易</a></p>
    <p><a href="http://www.qq.com" name="qq">腾讯</a></p>
</body>
<script>
    objs=document.anchors;
    for(i=0;i<objs.length;i++){
        objs[i].style.textDecoration='none';//超链接下划线被去掉
    }
</script>

5.tableObj.rows;
6.tableRowObj.cells;

<body>
    一个表格
</body>
<script>
    tobj=document.getElementById('tid');
    function set(i,j){
        tobj.rows[i-1].cells[j-1].innerHTML='abc';
    }
    set(2,3);//将第二行第三列的内容改为abc
</script>

7.selectObj.options;

8.selectObj.selectedIndex获取下拉菜单中第几个option选项被选中.

<body>
    <p>选择城市：</p>
    <p>
        <select  id="sid">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
    </p>
    <p><input type="button" value="OK" id="btid" /></p>
</body>
<script>
    btobj=document.getElementById('btid');
    sobj=document.getElementById('sid');
    btobj.onclick=function(){
        idx=sobj.selectedIndex;//获取选中下拉菜单的元素排第几:北京-0；上海-1；广州-2
        opts=sidobj.options;
        alert(opts[idx].value);//选中某个城市OK后弹出该城市的值

    }
</script>

Bravo！！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript | DOM和Ajax技术

DOM（document object model）文档对象模型一、获取DOM元素对象1.document.documentElement2.document.head3.document.title4.document.body二、获取元素对象的方法document.getElementById()//通过id找到对象document.getElementsByTagName()//通过标签名<>找到对象document.getElementsByClassNam
复制链接

扫一扫