JavaScript DOM页面元素操作

最新推荐文章于 2023-02-24 16:36:42 发布

403_ss

最新推荐文章于 2023-02-24 16:36:42 发布

阅读量380

点赞数

分类专栏： JavaScript 文章标签：基本操作

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

DOM 页面元素操作

DOM（document object model）概念：

文档：document，一个页面就是一个文档。也是页面的对象

节点：页面的所有内容。包括元素节点、文本节点、属性节点、（文档节点、注释节点）

元素：页面的所有标签。

DOM的初步认识

获取元素节点5种方式

1。通过 ID .getElementById 直接设置属性

例子：<img src="" height="" id="im"> document.getElementById("im").src="images/girl.jpg";

2。通过标签 .getElementsByTagName（"标签名"）返回的都是一个伪数组。可以用for循环遍历

类名 .getElementsClassName （"类名"）

.getElementsName （"属性名"）

例子：var arr = document.getElementsByTagName("div");

for( var i= 0; i<arr.length;i++){ arr[i].innerHTML = "我是div"}

在行内的属性可以直接通过.value.

3。通过CSS选择器 .querySelector（" 选择器名字"） ID选择器返回一个节点。多个时返回第一个，没有返回null

其余（类标签属性等）选择器返回一个数组 *IE8不支持

4. 如果想要为元素设置自定义属性，使用 .setAttribute（属性名, 属性值）; //设置多个循环

获取自定义属性值使用 . getAttribute（属性名）;

移除任意属性 .removeAttribute( 属性名）； // 若设置 .className = " " ; 值没有但属性名还在。

5。成对的标签，设置中间文本内容时，使用 .innerText 或 .textContent 属性

但是有问题：.innerText是IE浏览器的标准输入，谷歌火狐IE都支持，然而低版本的火狐不支持

.textContent是火狐浏览器的标准输入，在IE8中是不支持的（结果是undefined）

例子： document.getElementById("ss").innerText = "hello";

6。在某个元素的事件中，自己的事件中的 this 就是当前元素的对象（自己）

例子：<input type="button" value="按钮" id="btn">

var obj = document.getElementById("btn");

obj.onclick = function (){ this.value="我是按钮"}；

7。鼠标的排他功能思路。:hover / :active

例子：鼠标点击某一个时按钮颜色有白色变成绿色

经过的步骤 1.把所有的默认颜色设置为默认的（白色） 2.然后把要放上的按钮（this对象）颜色变为绿

8。在表单标签中，当属性的值只有一个，并且这个值是它本身，那么写js代码 DOM操作时，这个属性的值是布尔类型就可以了（如checked="checked" 表示为非空字符串，双引号里输入任意数据都能实现选中功能）

checked="checked" / multiple="multiple" / selected = "selected" / disabled="disabled"（文本禁用）

9。阻止超链接的默认跳转？为元素事件的函数设置 return false；

例子：<a href="http://www.baidu.com" onclick=" alert( '我不跳'); return false">

10。一个很好的小想法。如果想给盒子加边框，不用box-sizing 约束。可以给所有盒子预先加上边框，颜色为背景色。当需要时修改颜色即可。

//鼠标的排他思想

<head>
 <style>
    input{
        background-color: #c73636;
        color: #fff;
        border-style: none;
        width: 40px;
        height: 25px;
    }
    
    </style>
</head>
<body>
    <input type="button" value="颜色">
    <input type="button" value="颜色">
    <input type="button" value="颜色">
    <input type="button" value="颜色">
    <input type="button" value="颜色">
    <input type="button" value="颜色">

    <script>
    var arr = document.getElementsByTagName("input");
    for(var i=0;i<arr.length;i++){
        arr[i].onclick = function (){
            //步骤一，将所有的背景颜色设置为默认色；
            for(var j=0;j<arr.length;j++){
                arr[j].style.backgroundColor="#c73636";
            }

        //步骤二 当前点击的对象的背景颜色变绿色
            this.style.backgroundColor ="#0f0";
        }
    }
    
    </script>
</body>

//属性值唯一时，设置为布尔值
        <input type="radio" value="male" name="sex" id="">男
        <input type="radio" value="female" name="sex" id="">女
        <input type="radio" value="secret" name="sex" id="rad3">保密
        <input type="button" value="点击按钮默认选中保密" id="set">
        <script>
        function my$(id){
            return document.getElementById(id);
        }
        
        my$("set").onclick = function() {
            my$("rad3").checked= true;
        };
        </script>

常用的触发事件：

1。鼠标的点击事件： .onclick

2。鼠标的移入移出事件： .onmouseover .onmouseout

3。光标聚焦失焦事件： .onfocus .onblur

4。文本框内容选中改变事件： .onselect .onchange

5。网页加载完毕关闭事件： .onload .onunload

6。键盘抬起按下事件： .onkeyup .onkeydown

例子：dsgdgviregjrh

例子：dsgdgviregjr

innerText 与 innerHTML 区别：

设置标签内容：

innerText用来设置文本内容，设置标签无效。

innerHTML可以设置文本内容，也可以设置标签

获取标签内容：

innerText可以获取标签中间的文本内容，但是标签中如果还有标签，那么最里面的标签的文本内容也能获取.

innerHTML可以获取标签中间的所有内容，包括标签

//如果想要(获取)标签及内容，使用innerHTML

//如果想要设置标签，使用innerHTML
//如果想要设置文本，用innerText,或者innerHTML,或者textCont

DOM节点

.nodeType （节点类型） ===》 1是标签 2 是属性 3 是文本

.nodeName （节点名字） ===》大写的标签名小写的属性名 #text

.nodeValue （节点值） ===》 null 属性的值文本内容

节点的关系（元素单纯指标签）：

父节点：parentNode

父元素：parentElement

子节点：childNodes

子元素：children

第一个/最后一个子节点：firstChild / lastChild

第一个/最后一个子元素：firstElementChild / lastElementChild

之前/之后的兄弟节点：previousSibling / nextSibling

之前之后的兄弟元素：previousElementSibling / nextElementSibling

元素的根元素：ownerDocument

注意：凡是获取节点的代码在谷歌和火狐得到的都是相关的节点，凡是获取元素的代码在谷歌和火狐得到的都是相关的元素。
从前四个后，凡是获取节点的代码在IE8中得到的是元素，获取元素的相关代码，在IE8中得到的是undefined----元素的代码，IE中不支持

节点操作：除了创建节点，所有操作都是要找到元素的父节点 parentNode 才行。

document .createElement() 创建元素节点

.createTextNode() 创建文本节点

parentElemnt

.appendChild（）把新建的节点插入到某个节点的子节点后面

.insertBefore(newElement , targetElement) 在已有节点前插入一个新节点

.removeChild（）删除一个节点。成功返回删除的节点，失败返回null。

. replaceChild（newNode,oldNode）

获取body document.body

获取标题 doucment.title

获取html document.documentElement

DOM创建元素的三种方式：

一、document.write（" hello "）

缺点：在页面加载完毕后，通过这种方式创建元素，会重写页面。

二、 .innerHTML（" 我是.innerHTML "）

三、 a.创建元素节点 var par = document.getElementById(" parent") ;

b.追加到其父级元素节点后 var ele = doucument.createElement（"span"）;

还可以继续创建文本节点（createTextNode），追加到元素后 par .appenChild( ele );

为元素绑定事件的三种方式：

一、对象. 事件 document .getElementById(" btn") . onclick = function () { console.log("我只能绑定一个事件") ; }

缺点：只能绑定一个事件

二、调用对象.addEventListener( 事件类型名 , 函数 ,false)方法 *IE8不支持

document .getElementById(" btn").addEventListener("click", function (){

console.log("我是一个事件");

}, false);

优点：可为同一个元素添加多个同类型事件

三、调用对象 .attachEvent（ (on)事件类型，函数）方法 *谷歌火狐不支持

document .getElementById(" btn") .attachEvent（" onclick" , fn ）;

addEventListener（）与 attachEvent（）区别

相同点:都可以为元素绑定多个事件

不同点:

1.方法名不一样。

2.参数个数不一样。 addEventListener三个参数，attachEvent两个参数

3. addEventListener谷歌，火狐，IE11支持，IE8不支持 attachEvent 谷歌火狐不支持，IE11不支持，IE8支持

4. this不同，addEventL istener中的this是当前绑定事件的对象 attachEvent中的this是window

5. addEventListener中事件的类型(事件的名字)没有on attachEvent中的事件的类型(事件的名字)有on

为事件解绑：

用什么方式绑定事件，就应该用对应的方式解绑事件

一、对象.on事件类型名=null;

document .getElementById(" btn") . onclick =null;

二、对象. removeEventlistener("没有on的事件类型名"，函数名字，false);

三、对象. detachEvent("on事件类型名"，函数名字);

注意：如果是要解绑事件，那么事件的处理函数要用命名函数。因为匿名函数会把当成两个不同的函数。

//为任意元素绑定任意事件
function addEvent(element, type ,fn) {
    if(element.addEventListener){   //1.判断浏览器支不支持addEventListener这个方法。
        element.addEventListener(type, fn ,false);   //addEventListener方法的事件名不用加on
    }else if(element.attachEvent){    //不行，换attachEvent方法。
    element.attachEvent("on"+type ,fn); 
    }else{
        element["on"+type] = fn;    
    }
}


//为事件解绑
 function removeEvent(element , type ,fnName){
        if(element.removeEventListener){
            element.removeEventListener(type ,fnName,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type ,fnName);
        }else{
            element["on"+type]=null;
        }
    }

事件冒泡：

有多个元素嵌套，有层次关系，这些元素都绑定了相同的事件，如果里面的元素的事件触发了,外面的元素自动触发该事件。

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向外传播事件，假如页面上有这么一个节点树，div>ul>li>a;如果给a和div注册了点击事件，里面的 a执行点击事件的时候，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。a点击事件冒泡到最外面的div点击事件，这就是事件委托，委托它们父级代为执行事件。指定父级委托事件去处理程序，用来管理某一类型的所有事件。

在使用 addEventlistener ("没有on的事件类型名"，事件处理函数，控制事件阶段) 方法为元素绑定事件后，在事件触发的过程可能会出现事件冒泡的效果，为了阻止事件冒泡有两个方式：

1、 window. event. cancelBubble=true; 火狐不支持

2、 e.stopPropagation(); ie8 不支持

注意：window. event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准。由于事件参数e在IE8的浏览器中是不存在的所以用window. event来代替。//可以直接输出这个对象

addEventListener中第三个参数是控制事件阶段的，事件的阶段有三个:

1----->事件捕获阶段 :从外到里。

2----->事件目标阶段 :最开始选择的那个

3----->事件冒泡阶段: 从里朝外

通过 e. evenPhase 这个属性可以查看当前的事件在那个阶段。
*冒泡阶段与捕获阶段不会同时存在的，参数值为false 表示冒泡阶段，true表示捕获阶段。一般默认都是冒泡阶段，很少用捕获阶段。

//事件冒泡 元素嵌套示例
 <div id="div1">
     <div id="div2">
          <div id="div3">
          </div>
    </div>
</div>

一、嵌套使用单双引号问题解决：

1. 里面内容纯字符串时，内双外单、内单外双。

例：document.getElementById("td").innerHTML = " <img src=" image/ girl.jpg" alt =' sorry '> ";

2.里面有变量时，内双外双，内单外单

str += "<li>"+arr[i] +" </ li>";

二、什么时候用命名函数/ 匿名函数？

如果是循环的方式添加事件，用命名函数比较节省空间

如果不是循环的方式，用匿名函数

三、误写js代码时,放在head头部出错;

原因:页面加载是从上到下执行代码,执行函数时获取不到按钮, 页面加载完毕后按钮才能点击,才能获取到id.

解决: 1. js代码放到后面推荐

2.放到 window.onload 里边

403_ss

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM页面元素操作

DOM 页面元素操作DOM（document object model）概念：文档：document，一个页面就是一个文档。也是页面的对象节点：页面的所有内容。包括元素节点、文本节点、属性节点、（文档节点、注释节点）元素：页面的所有标签。DOM的初步认识获取元素节点5种方式1。通过 ID .getElementById直接设置属性 ...
复制链接

扫一扫