04-doucument对象属性和方法

由节点组成
1、元素节点: html body div button
2、文本节点：展示的内容<div>...</div>
3、属性节点：<input type="text" />

//document.activeElement 返回当前获取焦点元素
//document.addEventListener()   向文档添加句柄
//document.createElement()  创建元素节点
//createTextNode() 创建文本节点。
//节点对象属性和方法：
//appendChild() 可向节点的子节点列表的末尾添加新的子节点
//扩展  需求：二个列表，单击按钮时，左边最后一个数据移动到右边
//lastChild    返回最后一个子节点
//firstChild    返回第一个子节点
//childNodes    返回所有子节点
//nodeType 节点类型   元素节点的属性是返回1   文本节点的属性是返回3

html文件：

<div id="my"><div id="test">hello world</div><input type="text" value="输入信息" /><button class="btn">按钮</button><div><ul class="listL"><li>red</li><li>orange</li></ul><ul class="listR"><li>apple</li><li>banana</li></ul><button class="change">左边列表最后一个移入右边</button></div><div><ul class="listL2"><li>red</li><li>orange</li></ul><ul class="listR2"><li>apple</li><li>banana</li></ul></div>
</div>

js文件：

//返回当前获取焦点元素的id
alert(document.activeElement.id); //my
document.getElementById("my").onclick=function(){var _name = document.activeElement.tagName; //是body
}
//document.addEventListener()   向文档添加句柄
document.getElementById("my").addEventListener('click',function(){var _name = document.activeElement.tagName;document.getElementById("test").innerHTML = _name;
});//document.createElement()   创建元素节点。
//动态的操作DOM，添加内容 <div>hello world</div>
document.querySelector(".btn").onclick=function(){var _div = document.createElement("div");//元素节点var _text = document.createTextNode("hello world");   //创建文本节点。_div.appendChild(_text);   //把文本节点添 加到元素节点末尾document.body.appendChild(_div);
}//lastChild    返回最后一个子节点
//firstChild    返回第一个子节点
//扩展二  需求：二个列表，左侧选 中的数据移入到右侧var _listL = document.querySelector(".listL");var child = _listL.childNodes;   //获取所有子节点  ['red','orange']console.log(child.length);  //2for(var i=0;i<child.length;i++){child[i].onclick = function(){   //arr[0]document.querySelector(".listR").appendChild(this);   //this表示当前单击的对象}};//可能会出现的问题  有空格也算节点
//nodeType 节点类型   元素节点的属性是返回1   文本节点的属性是返回3

04-doucument对象属性和方法相关推荐

JavaScriptjQuery.document对象属性和方法
document对象属性和方法 document对象代表浏览器当面窗口或标签中载入的页面. 它的常用属性有: 属性 ...
JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)
一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用 ...
java mocked,JMockit 中被 Mocked 的对象属性及方法的默认值
前脚研究完 Mockito 中被 Mocked 的对象属性及方法的默认值, 虽然目今更多的是拥抱着 Mockito, 但总有时对 JMockit 也会挤眉弄眼,谁叫 JMockit 无所不能呢!被 M ...
JavaScript对象属性及方法
JavaScript对象属性及方法 1.对象属性 JavaScript对象时属性变量的容器,以键值对name:value的形式存在,访问方式为 name.value name[value] 2.对象方 ...
JavaScript原生对象属性和方法详解——String对象
length length 属性可返回字符串中的字符数目. length 是根据字符串的UTF-16编码来获取长度的,空字符串长度为0.length 不可修改. charAt() charAt() 方 ...
javascript中的array对象属性及方法
Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...
Mockito 中被 Mocked 的对象属性及方法的默认值
在 Java 测试中使用 Mockito 有段时日了,以前只是想当然的认为 Mock 的对象属性值和方法返回值都是依据同样的规则.基本类型是 0, 0.0, 或 false, 对象类型都是 null, ...
JavaScript的对象属性和方法和点击事件
JavaScript的Event对象用来描述JavaScript事件,Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一旦事件发生,便会生成Event对象.主要属性和方法: ...

04-doucument对象属性和方法

04-doucument对象属性和方法

04-doucument对象属性和方法相关推荐

最新文章

热门文章