js的对象操作~~~~三

最新推荐文章于 2024-04-19 16:33:08 发布

xiaozhegaa

最新推荐文章于 2024-04-19 16:33:08 发布

阅读量3.6k

点赞数

分类专栏： js 文章标签： javascript dom 对象

本文链接：https://blog.csdn.net/xiaozhegaa/article/details/53558758

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

继上一篇文章，DOM对象往下讲。

10、元素对象（element对象）
* 要操作element对象，首先必须要获取到element，
- 使用document里面相应的方法获取，或者说自己创建一个节点都可以
* 元素对象操作属性：对属性进行增加修改删除
* createElement(“div”)，表示创建一个元素节点，该方法只能通过document对象调用，进一步设置节点属性

//创建<div>元素节点
var divElement = document.createElement("div");
//在<div>元素内部写入字符串
 divElement.innerHTML = "XXXXXX";
//定位到<body>元素节点
 var bodyElement = document.body;
 //将<div>元素节点加入到<body>元素节点上
bodyElement.appendChild(divElement);

getAttribute(“属性的名”); // 获得属性的值
setAttribute(“属性名”,”属性值”); // 添加和修改
removeAttribute(“属性名”); // 移除属性
特别注意的是：
getAttributeNode(“name”)，取得name属性节点，他是一个对象，该方法可能在不同的浏览器显示效果不一致，得到节点对象之后，再继续操作节点对象
getAttribute(“name”)，取得name属性的值，他是一个值

// 查找元素.
var input = document.getElementsByTagName("input")[0];
//alert(input.getAttribute("value"));//测试
//修改name属性的值
input.setAttribute("name","uname");//alert(input.getAttribute("name"));测试
// 添加一个属性id
alert(input.getAttribute("id"));
input.setAttribute("id","username");//alert(input.getAttribute("id"));测试
alert(input.name);
input.removeAttribute("name");
alert(input.getAttribute("name"));

【在标签下查找标签】
** 使用属性 childNodes，但是这个属性兼容性很差
** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法

    // 查找第一个ul下的所有的li标签.
    // 1.先查找第一个ul标签.
    var city1 = document.getElementById("city1");
    // 2.再找ul下的li标签.
    //var childs = city1.childNodes; 测试
    //alert(childs.length);   测试
    var lis = city1.getElementsByTagName("li");//避免使用childNodes
    alert(lis.length);

11、Node对象 :节点对象（节点包括元素节点属性节点文本节点），属性对象
1.元素节点
nodeName：标签名 nodeType: 1 nodeValue:没有 null
属性节点
nodeName: 属性名 nodeType: 2 nodeValue:属性的值
文本节点
nodeName: #text nodeType: 3 nodeValue:文本内容
也就是说，对不同“节点操作”时，返回的结果时不一样的，例如说，对元素节点操作时，返回结果为：标签名字。 nodeType = 1 ，没有返回值。而对其他的操作时，返回结果又不一样，看下面例子

    // 分别获得元素节点的 节点名称 节点类型 节点的值.

            // 1.元素节点
            var input = document.getElementById("username");
            //alert(input.nodeName);    // output INPUT
            //alert(input.nodeType);    // output 1
            //alert(input.nodeValue);   // output null
            // 2.属性节点
            var attr = input.getAttributeNode("name"); // 获得属性节点.
            //alert(attr.nodeName);     // output   name
            //alert(attr.nodeType);     // output   2
            //alert(attr.nodeValue);    // output   username

            // 3.文本节点
            var p = document.getElementsByTagName("p")[0];
            var t = p.firstChild;
            alert(t.nodeName);              // output  #text
            alert(t.nodeType);              // output  3
            alert(t.nodeValue);             // output  文本

2.节点对象的父节点子节点及同辈节点

<ul id="ul1">
        <li id= "li1">qqqqq</li>
        <li>wwww</li>
</ul>

1） * 父节点：

//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);

2）* 子节点：
firstChild：获取第一个子节点
lastChild：获取最后一个子节点

    var ul1 = document.getElementById("ul1");
    //第一个子节点
    var li1 = ul1.firstChild;
    alert(li1.id);
    //lastChild：获取最后一个子节点
    var li4 = ul1.lastChild;
    alert(li4.id);

3）* 同辈节点：
nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

    //li直接关系是同辈节点
    //获取li的id是li3的上一个和下一个兄弟节点
    var li3 = document.getElementById("li3");
    alert(li3.nextSibling.id);
    alert(li3.previousSibling.id);

4）* 检测节点中是否有子节点和属性.
hasChildNodes()
hasAttributes()

//select元素是否有子元素
var selectElement = document.getElementsByTagName("select")[0];
var flag = selectElement.hasChildNodes();
alert(flag==true?"有子元素":"无子元素");*/

3：createTextNode(“”)，创建一个文本节点

//创建<div>元素节点，创建"哈哈"文本节点，添加到<body>节点中
var divElement = document.createElement("div");
var txtElement = document.createTextNode("哈哈文本");
var bodyElement = document.body;
//将文本节点加入到元素节点中
divElement.appendChild(txtElement);         
//将元素节点加入到body元素节点中
bodyElement.appendChild(divElement);

12操作dom树

【总结】* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入，两个参数，新节点，旧节点，这里是父节点调用
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换
* 复制节点方法：
cloneNode(boolean)：

//添加节点
    //获取li3 标签
    var li13 = document.getElementById("li13");
    //创建li
    var li15 = document.createElement("li");
    //创建文本
    var text15 = document.createTextNode("董小宛");
    //把文本添加到li下面 appendChild
    li15.appendChild(text15);
    //获取到ul
    var ul21 = document.getElementById("ulid21");
    //在<li>貂蝉</li>之前添加 <li>董小宛</li> 
    //insertBefore(newNode,oldNode)新节点，旧节点，父节点调用该方法
    ul21.insertBefore(li15,li13);

//删除节点
    //获取li标签
    var li24 = document.getElementById("li24");
    //获取父节点：两种方式  1、通过id获取 ； 2、通过属性 parentNode获取
    var ul31 = document.getElementById("ulid31");
    //删除（通过父节点）
    ul31.removeChild(li24);

//替换节点，单击gz节点时，用color节点替换   
document.getElementById("gz").onclick=function(){   
    var colorElement = document.getElementById("color");
    ar cityElement = document.getElementById("city");
    cityElement.replaceChild(colorElement,this);
    //其中this表示：document.getElementById("gz")    
    //该方法必须在直接父元素上调用        
    //该方法是一个直接父子操作方法
}

//替换节点
    //获取li34
    var li34 = document.getElementById("li34");
    //创建li
    var li35 = document.createElement("li");
    //创建文本
    var text35 = document.createTextNode("张无忌");
    //把文本添加到li下面
    li35.appendChild(text35);
    //获取ul
    var ul41 = document.getElementById("ulid41");
    //替换节点，父节点来调用该方法
    ul41.replaceChild(li35,li34);   

//复制节点
    //获取ul
    var ul41 = document.getElementById("ulid41");
    //复制ul，放到类似剪切板里面
    var ulcopy = ul41.cloneNode(true)
    //获取到div
    var divv = document.getElementById("divv");
    //把副本放到div里面去
    divv.appendChild(ulcopy);

13、innerHTML属性，虽然这个属性不是dom的组成部分，但是大多数浏览器都支持的属性，非主流浏览器是不一定支持的。所以可以建议大家使用appendChild（）

第一个作用：获取文本内容

    //获取span标签
    var span1 = document.getElementById("sid");
    alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是html代码）

    //向div里面设置内容 <h1>AAAAA</h1>
    //获取到div
    var div11 = document.getElementById("div11");
    //设置内容
    div11.innerHTML = "<h1>AAAAA</h1>";

14、JS中的事件:记住这些常见的时间旧可以了额

onclick:单击
ondblclick:双击
onchange:列表框改变事件
onmouseover:鼠标放在上面 onmouseout:鼠标离开 onmousemove:鼠标移动.
onload:页面加载时间 onunload:页面的卸载事件.
onblur:失去焦点 onfocus:获得焦点.
onkeyup:键盘事件 onkeydown:键盘事件

js这一块就简单讲到这里，会把一些案例放在一个文件给大家下载

xiaozhegaa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js的对象操作~~~~三

继上一篇文章，DOM对象往下讲。10、元素对象（element对象） ** 要操作element对象，首先必须要获取到element， - 使用document里面相应的方法获取 ** 元素对象操作属性：对属性进行增加修改删除 getAttribute(“属性的名”); // 获得属性的值 setAttribute(“属性名”,”属性值”);
复制链接

扫一扫