js加载html中调用的类,JAVAScript学习--DOM

通过HTML DOM，可访问JavaScript HTML文档的所有元素。下面本篇文章就来给大家介绍一下，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

DOM能干啥？

●　JavaScript 能够改变页面中的所有 HTML 元素

●　JavaScript 能够改变页面中的所有 HTML 属性

●　JavaScript 能够改变页面中的所有 CSS 样式

●　JavaScript 能够对页面中的所有事件做出反应

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树：

查找元素方法：

1、直接查找：

●　getElementByid(): 通过 id 找到 HTML 元素

●　getElementsByTagName(): 通过标签名找到 HTML 元素(列表)

●　getElementsByClassName(): 通过类名找到 HTML 元素(列表)

●　getelementsByName(): 通过name属性找到HTML元素(列表)

2、间接查找：parentNode 父节点

childNodes 所有子节点

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个兄弟节点

previousSibling 上一个兄弟节点

parentElement 父节点标签元素

children 所有子标签

firstElementChild 第一个子标签元素

lastElementChild 最后一个子标签元素

nextElementtSibling 下一个兄弟标签元素

previousElementSibling 上一个兄弟标签元素

3、添加删除节点和元素：

操作方法：innerText 文本，指定ID下所有文本的拼接，去除间隔的HTML元素

outerText 写模式下，替换所有子元素

innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。

outerHTML 写模式下，新的元素替换原有的 DOM 树

value 属性可设置或返回密码域的默认值。获取文本框的值。

Class属性操作(CSS样式表名)：className 获取所有类名

classList.remove(cls) 删除指定类

classList.add(cls) 添加类

checkbox属性：checkbox.checked：true选中，false不选

tag标签操作：

1、createElement()创建标签：

每个HTML标签都有自己的属性，属性参照：https://www.w3school.com.cn/jsref/dom_obj_anchor.aspfunction append_tag(){

var a = document.createElement('a')

var cur = document.getElementById('dd')

a.innerHTML='click me'

a.href='http://www.baidu.com'

a.className='a1'

cur.appendChild(a) //添加标签}\\----------等同于

var a_tag="

insertAdjacentHTML('位置',obj) 在指定的地方插入html内容

位置说明：beforeBegin：标签起始位置前(标签前)

afterBegin：标签起始位置后(标签内)

beforeEnd：标签结束位置前(标签内)

afterEnd： 标签结束位置后(标签外)

3、标签样式操作style：var obj = document.getElementById('i1')

obj.style.fontSize = "32px";

obj.style.backgroundColor = "red";

4、位置操作document.documentElement.offsetHeight 总文档高度

document.documentElement.clientHeight 当前文档占屏幕高度

tag.offsetHeight 自身高度

tag.offsetTop 距离上级定位高度

tag.offsetParent 父定位标签

tag.scrollTop 滚动高度/*

clientHeight -> 可见区域：height + padding

clientTop -> border高度

offsetHeight -> 可见区域：height + padding + border

offsetTop -> 上级定位标签的高度

scrollHeight -> 全文高：height + padding

scrollTop -> 滚动高度

特别的：

document.documentElement代指文档根节点

*/

事件：

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

语法：element.addEventListener(event, function, useCapture);

事件类型：属性此事件发生在何时...属性此事件发生在何时...

onabort图像的加载被中断。onload一张页面或一幅图像完成加载。

onblur元素失去焦点。onmousedown鼠标按钮被按下。

onchange域的内容被改变。onmousemove鼠标被移动。

onclick当用户点击某个对象时调用的事件句柄。onmouseout鼠标从某元素移开。

ondblclick当用户双击某个对象时调用的事件句柄。onmouseover鼠标移到某元素之上。

onerror在加载文档或图像时发生错误。onmouseup鼠标按键被松开。

onfocus元素获得焦点。onreset重置按钮被点击。

onkeydown某个键盘按键被按下。onresize窗口或框架被重新调整大小。

onkeypress某个键盘按键被按下并松开。onselect文本被选中。

onkeyup某个键盘按键被松开。onsubmit确认按钮被点击。

onunload用户退出页面。

键盘鼠标事件：属性描述

altKey返回当事件被触发时，"ALT" 是否被按下。

button返回当事件被触发时，哪个鼠标按钮被点击。

clientX返回当事件被触发时，鼠标指针的水平坐标。

clientY返回当事件被触发时，鼠标指针的垂直坐标。

ctrlKey返回当事件被触发时，"CTRL" 键是否被按下。

metaKey返回当事件被触发时，"meta" 键是否被按下。

relatedTarget返回与事件的目标节点相关的节点。

screenX返回当某个事件被触发时，鼠标指针的水平坐标。

screenY返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey返回当事件被触发时，"SHIFT" 键是否被按下。

小例子：

1、文本框默认文字

function foucs(th){

var v=th.value;

if (v=='请输入关键字'){

th.value='';

}

}

function blurs(th){

var v=th.value;

if (v.length==0){

th.value='请输入关键字';

th.style.color="gray";

th.style.border="1px solid red";

}

}

2、添加标签

function b_b(){

var std=document.getElementById('std');

var new_b="";

std.insertAdjacentHTML('beforeBegin',new_b);}

function a_b(){

var std=document.getElementById('std');

var new_b="";

std.insertAdjacentHTML('afterBegin',new_b);}

function b_e(){

var std=document.getElementById('std');

var new_b="";

std.insertAdjacentHTML('beforeEnd',new_b);}

function a_e(){

var std=document.getElementById('std');

var new_b="";

std.insertAdjacentHTML('afterEnd',new_b);}

3、展开同时隐藏其它子菜单：

HTML：

人员管理

• 1
• 2
• 3
• 4
• 5
• 6
• 7

组别管理

• 1
• 2
• 3
• 4
• 5
• 6
• 7

js：function show_sub_menu(th){

var parentId = th.id;

var childId='s'+parentId;

var childE=document.getElementById('left_menu').children;

for (var s in childE){

var e=childE[s].classList;

console.log(e);

if (e){

if (childE[s].id==childId){

childE[s].classList.add('show');

}else{

childE[s].classList.remove('show');

}

}

}}

4、标签提交：

提交吧

5、html、css、js页面分离：生产环境的写法。

每类存储为单独的文件，其中js使用dom添加事件方法，可以html更简洁。

例子：鼠标移动表格行变色

HTML：

1	1	1	1	1
1	1	1	1	1
1	1	1	1	1
1	1	1	1	1
1	1	1	1	1

JS:给table添加属性和classvar t=document.getElementById('tb').classList;

t.add('tb_style');

var mytrs=document.getElementsByTagName('tr');

var td_numbers=mytrs.length;

for (var td=0;td

mytrs[td].οnmοuseοver=function(){this.style.backgroundColor='red';};

mytrs[td].οnmοuseοut=function(){this.style.backgroundColor='';};

}

css.tb_style{

bacground-color:pink;}

6、词法分析：形参--》函数体内函数,编译时函数体内的函数会分配 内存地址，覆盖形参。function cifa(age){

console.log(age); \\function age

age=22;

console.log(age); \\22

function age(){};

console.log(age); \\22}age(3)