JS中的DOM基础

完整的javascript是由ECMAScript(语法)，Browser Object(DOM,BOM)(特性)组成的。

通过ID	getElementById()	返回带有指定ID的元素
通过标签名	getElementByTagName()	返回带有指定标签名的所有元素，返回的是一个类数组对象
通过name属性	getElementByName()	返回指定name属性值的所有子元素的集合，返回的是一个类数组对象。
通过css类	getElementByClassName()	返回指定class名称的元素

//TagName
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var ul=document.getElementsByTagName("ul");
    var lis=document.getElementsByTagName("li");
    console.log(ul);//[ul]
    console.log(lis)//[li, li, li, li]
    var li3=lis[2];
    console.log(li3);//<li>3</li>

<form action="" id="infor">
    <input type="checkbox" name="like"/>
    <input type="checkbox" name="like"/>
    <input type="checkbox" name="like"/>
    <input type="checkbox" name="like"/>
</form>

    var inputs=document.getElementsByName("like");
    console.log(inputs);
    console.log("获取到的带name属性的元素有："+inputs.length+"个")
    // [input, input, input, input] 获取到的带name属性的元素有：4个

//ClassName
<div class="news">
    <p class="new1">新闻标题1</p>
    <p class="new2">新闻标题2</p>
    <p class="new3">新闻标题3</p>
</div>

    var div=document.getElementsByClassName("news")[0];//获取到了第一个div,他的子元素p标签是在它的基础上再通过类选择器获取元素的。
    var new1=div.getElementsByClassName("new1");
    var new2=div.getElementsByClassName("new2");
    console.log(div);
    console.log(new1);//[p.new1]
    console.log(new2);//[p.new2]

主要内容：获取一个元素，访问一个元素的样式，设置和删除属性。

基本的DOM查找方法：document.getElementById() 返回值:DOM对象 document.getElementsByTagName() 返回值：数组
设置DOM元素的样式

<div class="box" id="box">元素</div>
<ul id="list1">
    <li>前端开发</li>
    <li>服务器端开发</li>
    <li>UI设计</li>
</ul>
<ol>
    <li>javascript原生</li>
    <li>javascript框架</li>
</ol>

<script>
    //document的意思是获取页面所有的。
    //获取id为box的这个元素
    var box=document.getElementById("box");
    console.log(box);
    //获取页面中所有的li
    var lis=document.getElementsByTagName("li");
    console.log(lis.length)
    //获取id为list1下的li
    var lis1=document.getElementById("list1").getElementsByTagName("li");
    console.log(lis1.length);
</script>

给元素设置样式：

ele.style.styleName=styleValue 设置ele元素的css样式。

说明：

ele必须为·DOM对象
styleName不能使用"-"连字符形式font-size使用驼峰命名形式fontSize

//getElementsByTagName取完是数组类型，要把其变为DOM类型，进行遍历。
    var lis1=document.getElementById("list1").getElementsByTagName("li");
    for(var i=0;i<lis1.length;i++){
        lis1[i].style.color="red";
        if(i==0){
            lis1[i].style.backgroundColor="#ccc";
        }else if(i==1){
            lis1[i].style.backgroundColor="#ff0";

        }else if(i==2){
            lis1[i].style.backgroundColor="#0f0";

        }else{
            lis1[i].style.backgroundColor="#999";
        }

innerHTML属性、className属性、DOM元素上添加删除获取属性。

ele.innerHTML:返回ele元素开始和结束标签之间的HTML.获取和设置标签之间的文本和html内容。

ele.innerHTML="html",返回ele元素开始和结束标签之间的HTML的内容为html

var lis1=document.getElementById("list1").getElementsByTagName("li");
    for(var i=0;i<lis1.length;i++){
        console.log(lis1[i].innerHTML);
    }

    /*<i>前端开发</i>
    <b>服务器端开发</b>
    UI设计*/

var lis1=document.getElementById("list1").getElementsByTagName("li");
    for(var i=0;i<lis1.length;i++){
        console.log(lis1[i].innerHTML);
        lis1[i].innerHTML+='程序';
    }

className:返回ele元素的class属性。

 .current{ background-color: red;color: aqua}

 lis1[1].className="current";
//动态添加class替换元素本身的class。也就是current会代替lis1[1]原来的class属性。

//如果有两个以上class属性值，那么获取这个元素的className属性时，会将它的class属性值都打印出来。
console.log(document.getElementById("box").className);//box

获取DOM元素属性或添加属性。

获取属性：ele.getAttribute("attribute");

说明：

ele是要操作的dom对象。
attribute是要获取的html属性。(id,type)

<p id="text" align="center" curdata="title" class="text">文本</p>
<input type="text" name="user" value="user" id="user" validate="true"/>
<script>
    //获取标签属性语法 DOM对象.属性(人家标签本来就具有的属性) p.id class除外
    var p=document.getElementById("text");
    console.log(p.id);//text
    console.log(p.align);//center
    console.log(p.class);//undefined
    console.log(p.className);//text
    /*console.log(p.data-type);//语法报错*/
    console.log(p.curdata);//undefined原因是p标签里没有curdata的属性

    //获取标签中不是本身具有的属性值,获取自定义的属性。
    console.log(p.getAttribute("curdata"));//title
    console.log(p.getAttribute("class"));//text

    var user=document.getElementById("user");
    console.log(user.type);//text
    console.log(user.getAttribute("validate"));///true

设置属性：

ele.setAttribute("attribute",value);

注意：

setAttribute方法必须要有两个参数
如果value是字符串，需加引号
setAttribute有兼容性问题

//设置属性
    p.setAttribute("data-color","red");
    user.setAttribute("isread","false");
    //删除属性
    p.removeAttribute("align");

猜你喜欢