html元素,属性修改

修改html页面内容

title.textContent="<i>js还可以修改元素内容</i>";

title.innerHTML="<i>js还可以修改元素的内容</i>";

textContent设置的内容中标签会显示为标签文本会将i标签也显示出来，不会显示斜体
innerHtml中的标签会被解析为元素对象显示斜体

修改html样式

var title = document.getElementById( "title" );

// 元素对象通过style属性修改样式。

title.style.color = "red" ;

// 在css中样式是通过-分隔，在js中，样式名要用驼峰命名法。

title.style.fontSize = "20px" ;

// 通过js修改的样式实际上修改的是元素的行内样式。

通过同名属性修改

// 大部分的html属性，都可以在js中通过元素对象的同名属性进行修改，
例如a标签的href属性，
img的src属性，
input的placehodeer属性等

link.href = "http://www.eotodo.com" ;

// 元素对象的classList表示元素的class列表，。add方法用于添加一个class值。

title.classList.add( "c1" );

// .remove删除一个class值

title.classList.remove( "c3" );

// toggle.切换一个class值（有则删除，无则添加）

title.classList.toggle( "c1" );

// 判断某个元素的class中是否包含某个值

console.log(title.classList.contains( "c4" ));

// 对于元素的class属性，它可以设置多个值。

它是一个列表形式的数据，修改时不会修改全部，

而是添加一个class值或删除一个已有的class值，

所以class的修改不能直接改元素对象的class属性。

// title.class="c1"; 错误的写法

html中的DOM对象

DOM

文档对象模型（Document Object Model），代表了网页本身，通过document对象来访问HTML中的任何元素。

主要属性

属性	说明
document.title	设置文档标题等价于HTML的
document.bgColor	设置页面背景色
document.linkColor	未点击过的链接颜色
document.alinkColor	激活链接(焦点在此链接上)的颜色
document.fgColor	设置前景色(文本颜色)
document.vlinkColor	已点击过的链接颜色
document.URL	设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate	文件建立日期，只读属性
document.fileModifiedDate	文件修改日期，只读属性
document.fileSize	文件大小，只读属性
document.cookie	设置和读出cookie
document.charset	设置字符集简体中文:gb2312
document.domain	获取域名
document.doctype	获取doctype类型
document.documentElement	获取文档的根节点 <html>…</html>
document.head	获取head之间的节点<head>…</head>
document.body	获取body之间的节点<body>…</body>
document.activeElement	返回当前获取焦点元素
document.all	文档中所有元素
document.images	文档中所有img元素
document.links	文档中所有元素
document.styleSheets	文档中所有的link或style元素
document.forms	文档中所有的form元素

查找HTML元素

1、getElementById(ID)
获取对应id的对象

<div id="div">divValue</div>
var div=document.getElementById('div')
console.log(div.innerText) //divValue

2、getElementsByTagName(tagName)
获取指定标签名的所有对象，返回数组

<div id="div">divValue</div>
<div id="div1">divValue1</div>
<div id="div2">divValue2</div>
var div=document.getElementsByTagName('div')
console.log(div)//HTMLCollection(3) [div#div,div#div1,div#div2]

3、getElementsByName(name)
获取指定name的所有对象，返回数组

<div name="div">divValue</div>
<div name="div">divValue1</div>
<div name="div">divValue2</div>
var div=document.getElementsByName('div')
console.log(div)//NodeList(3) [div, div, div]

事件

1、onclick

<body>
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>
</body>

使用dom分配事件

<script>
document.getElementById("btn").onclick = displayDate;
</script>

2、onload 和 onunload
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

3、onchange
通常用于输入字段的验证

<input type="text" onchange="upperCase()" />

4、onmouseover 和 onmouseout
用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数。

5、onmousedown 和 onmouseup 以及 onclick

当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发.

事件监听器

1、addEventListener()
为指定元素指定事件处理程序。可以为相同元素添加多个事件，同时还不会覆盖原有的事件
接受三个参数，第一个是事件（就是上面的事件不带on），第二个是处理方法，第三个则是事件的传播方法：冒泡和捕获。默认false，冒泡，true为捕获。

在 IE8或者更早的版本是不支持addEventListener()的，可以使用attachEvent()。
element.attachEvent(event, function);

document.getElementById('btn').addEventListener('click',function(e){}) //e就是点击事件
//第二个参数也可以引用外部“命名”的函数
document.getElementById('btn').addEventListener('click',handler)
function handler(e){}

2、removeEventListener()
删除事件监听器
element.detachEvent(event, function);

document.getElementById('btn').removeEventListener('click')

节点

通过dom可以在节点之间进行导航。
通过innerHTML可以访问节点的值

document.getElementById("root").innerHTML;

nodeValue
使用nodeValue访问

document.getElementById("root").firstChild.nodeValue;//firstChild 找到具体元素的text文本

childNodes
访问子节点

<div id='root'>js dom 对象<p>p</p></div>
document.getElementById("root").childNodes;
//NodeList(2) [text, p]

用nodeValue找到p的内容

document.getElementById('root').childNodes[1].firstChild.nodeValue //一定要有个firstChild获取文本

nodeName属性
节点名称

nodeName 是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document

document.getElementById('root').childNodes[1].nodeName // p
document.getElementById('root').childNodes[1].firstChild.nodeName // #text
document.nodeName //#document

nodeType

节点类型，返回数字

节点	类型
元素节点	1	p
属性节点	2	class=“p”
文本节点	3	p
注释节点	8	<!-- 注释–>
文档节点	9	html文档
文档类型节点	10	<!Doctype html>

添加节点

appendChild
createElement创建元素（标签名），createTextNode创建文本节点。
appendChild 将元素添加进已有的元素中（在已有元素的最后开始添加）。

var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("root");
element.appendChild(para);

insertBefore()
接受两个参数，第一个为要插入的元素，第二个为插入元素的后一个元素（也就是要插在哪个元素之前）

var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("root");
var p = document.getElementsByTagName('p')[0]
element.appendChild(para,p); //插在p之前

removeChild
删除元素

var parent = document.getElementById("root");
var child = document.getElementsByTagName("p");
parent.removeChild(child);

replaceChild
替换元素，接受两个参数，第一个为新元素，第二个为要替换的元素。

var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("root");
var child = document.getElementsByTagName("p");
parent.replaceChild(para, child);

HTMLCollection对象

包含html元素的类似数组对象，不是数组，可以像数组一样，使用索引来获取元素，但是无法使用数组的方法： valueOf(), pop(), push(), 或 join()

例如getElementsByTagName()返回的就是HTMLCollection对象

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <script>
      console.log(document.getElementsByTagName('p')) //HTMLCollection(3) [p, p, p]
    </script>
  </body>

NodeList节点列表

从文档中获取的节点列表 (集合) 。
所有浏览器的childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

 <body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <script>
      console.log(document.querySelectorAll('p')) //NodeList(3) [p, p, p]
    </script>
  </body>

与HTMLCollection对象的区别

HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。

ひょうりゅ

js网页基础